/* === base/variables.css === */
/**
 * CSS Custom Properties (Variables)
 * Design tokens for consistent theming across the application
 */

:root {
    /* ===== COLOR SYSTEM ===== */

    /* Primary Brand Colors */
    --green: #9bb39c;
    --green-dark: #7a9a7b;
    --green-neon: #b8ff9b;

    /* Dark Theme Colors */
    --dark: #0a0a0a;
    --dark-card: #111111;
    --dark-lighter: #1a1a1a;
    --dark-hero: #0f1f0f;
    --dark-alt: #0f0f0f;
    --dark-blue: #1a1a2e;

    /* Accent Colors */
    --accent: #00ff88;
    --orange: #ff6b35;
    --red: #dc2626;
    --red-light: #ff6b6b;

    /* Text Colors */
    --text-light: #e0e0e0;
    --text-muted: #888888;
    --text-muted-light: #b0b0b0;
    --text-muted-lighter: #d0d0d0;
    --text-dark: #333333;
    --white: #ffffff;

    /* Background Colors */
    --bg-light: #f8f9fa;

    /* Aliases for backward compatibility */
    --green-primary: var(--green);
    --text: var(--text-light);
    --text-primary: var(--text-light);
    --text-dim: var(--text-muted);
    --border-color: var(--green-20);

    /* Green Opacity Variants */
    --green-03: rgb(155 179 156 / 3%);
    --green-05: rgb(155 179 156 / 5%);
    --green-10: rgb(155 179 156 / 10%);
    --green-15: rgb(155 179 156 / 15%);
    --green-20: rgb(155 179 156 / 20%);
    --green-30: rgb(155 179 156 / 30%);
    --green-40: rgb(155 179 156 / 40%);
    --green-50: rgb(155 179 156 / 50%);
    --green-80: rgb(155 179 156 / 80%);

    /* ===== SPACING SYSTEM ===== */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 2.5rem;   /* 40px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 3.75rem; /* 60px */
    --spacing-4xl: 5rem;    /* 80px */

    /* Section Padding */
    --section-padding: 6.25rem 0;     /* 100px vertical */
    --section-padding-sm: 3.75rem 0;  /* 60px vertical */
    --section-padding-lg: 8.75rem 0;  /* 140px vertical */

    /* Container Horizontal Padding - FLUID RESPONSIVE */
    /* Mobile: 1.5rem (24px), Desktop: 3rem (48px) */
    --container-padding-x: clamp(1.5rem, 4vw, 3rem);

    /* ===== BORDER RADIUS SYSTEM ===== */
    --radius-small: 4px;    /* buttons, small elements */
    --radius-medium: 12px;  /* cards, larger components */
    --radius-large: 16px;   /* larger cards, panels */
    --radius-xl: 24px;      /* hero elements, major sections */
    --radius-circle: 50%;   /* avatars, badges */

    /* ===== ICON SIZE SYSTEM ===== */
    --icon-sm: 28px;
    --icon-md: 40px;
    --icon-lg: 48px;
    --icon-xl: 60px;

    /* ===== GRADIENT TOKENS ===== */
    --gradient-dark-card: linear-gradient(135deg, var(--dark-lighter) 0%, var(--dark-alt) 100%);
    --gradient-hero: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 50%, var(--dark-hero) 100%);

    /* ===== TYPOGRAPHY ===== */

    /* Font Families */
    --font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    --font-mono-short: 'SF Mono', monospace;

    /* ===== LAYOUT ===== */

    /* Container Max-Widths */
    --container-sm: 800px;
    --container-md: 900px;
    --container-lg: 1000px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    /* ===== Z-INDEX SYSTEM ===== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 1000;
    --z-tooltip: 10000;
    --z-notification: 10001;
}

/* === base/reset.css === */
/**
 * CSS Reset & Base Styles
 * Normalize browser defaults and set base styles
 */

/* ===== RESET ===== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--dark);
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Custom cursor */
body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="%239bb39c" opacity="0.5"/></svg>') 10 10, auto;
}

/* ===== ACCESSIBILITY ===== */

/* Skip to main content link */
.skip-to-main {
    background: var(--green);
    border-radius: var(--radius-small);
    color: var(--dark);
    font-weight: 600;
    left: -9999px;
    padding: 1rem 2rem;
    position: absolute;
    top: 1rem;
    z-index: 9999;
}

.skip-to-main:focus {
    left: 1rem;
    outline: 2px solid var(--green-neon);
    outline-offset: 2px;
}

/* Reduced motion preference - removed for clean CSS */

/* ===== LINKS ===== */

a {
    color: var(--green);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--green-neon);
}

/* ===== UTILITY CLASSES ===== */

.text-center {
    text-align: center;
}

.text-mono {
    font-family: var(--font-mono);
}

.text-sans {
    font-family: var(--font-sans);
}

.text-green {
    color: var(--green);
}

.text-muted {
    color: var(--text-muted);
}

/* Tech elements that need monospace font */
.code-line,
.code-line-item,
.terminal-prompt,
.service-badge,
.stat-value,
.tech-name,
.skill-tag,
.process-number,
code,
pre {
    font-family: var(--font-mono);
}

/* ===== LAYOUT UTILITIES ===== */
/* NOTE: .container is defined in layout/grid.css */
/* NOTE: .section styles are defined in layout/grid.css */

/* === base/typography.css === */
/**
 * Typography System - Fluid & Responsive
 * Modern fluid typography using clamp() for smooth scaling across devices
 * Headings, paragraphs, and text styles
 */

/* ===== HEADINGS ===== */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-wrap: balance;
}

/* h1: Scales from 2rem (mobile) to 4.5rem (desktop) */
h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
}

/* h2: Scales from 1.75rem (mobile) to 3rem (desktop) */
h2 {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
}

/* h3: Scales from 1.5rem (mobile) to 2rem (desktop) */
h3 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
}

/* h4: Scales from 1.25rem (mobile) to 1.75rem (desktop) */
h4 {
    font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem);
}

/* h5: Scales from 1.1rem (mobile) to 1.5rem (desktop) */
h5 {
    font-size: clamp(1.1rem, 2vw + 0.3rem, 1.5rem);
}

/* h6: Scales from 1rem (mobile) to 1.25rem (desktop) */
h6 {
    font-size: clamp(1rem, 1.5vw + 0.3rem, 1.25rem);
}

/* ===== PARAGRAPHS ===== */

p {
    color: var(--text-light);
    font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem); /* Fluid body text */
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 65ch; /* Optimal reading length */
}

/* ===== SECTION TITLES & SUBTITLES ===== */

.section-title {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem); /* Fluid section titles */
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left;
}

.section-title::before {
    color: var(--green-neon);
    content: '// ';
    font-family: var(--font-mono);
}

.section-subtitle {
    color: var(--text-muted);
    font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem); /* Fluid subtitles */
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

/* ===== TEXT HIGHLIGHTS ===== */

.highlight {
    color: var(--green);
    position: relative;
}

/* ===== RESPONSIVE - MOBILE FONT ADJUSTMENTS ===== */

@media (max-width: 640px) {
    /* Buttons text size */
    .btn {
        font-size: 0.95rem;
        padding: 0.9rem 1.8rem;
    }

    /* Smaller spacing for mobile readability */
    .section-title {
        margin-bottom: 1.5rem;
    }

    .section-subtitle {
        margin-bottom: 2.5rem;
    }

    /* Tighten paragraph spacing on mobile */
    p {
        margin-bottom: 1rem;
    }
}

/* === layout/grid.css === */
/**
 * Grid & Layout System
 * Container, sections, and basic layout utilities
 */

/* ===== CONTAINER ===== */

.container {
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 var(--container-padding-x);
}

/* Container Modifiers */
.container--narrow {
    max-width: var(--container-md);
}

.container--wide {
    max-width: var(--container-2xl);
}

/* ===== SECTION SPACING ===== */

.section {
    padding: 5rem var(--container-padding-x);  /* 80px vertical, 48px horizontal */
}

.section--large {
    padding: 6.25rem var(--container-padding-x);  /* 100px vertical */
}

.section--small {
    padding: 4rem var(--container-padding-x);  /* 64px vertical */
}

.section-dark {
    background: var(--dark-card);
}

.section-darker {
    background: var(--dark);
}

/* ===== GRID BACKGROUNDS ===== */

.grid-bg {
    animation: float 20s ease-in-out infinite;
    background-image:
        linear-gradient(var(--green-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--green-05) 1px, transparent 1px);
    background-size: 50px 50px;
    height: 100%;
    left: 0;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .grid-bg { animation: none; }
}

/* === layout/header.css === */
/**
 * Header & Navigation
 * Top navigation bar, logo, menu links, mobile menu
 * Mobile breakpoint: 900px (desktop nav shows at 900px+)
 */

/* ===== MAIN NAVIGATION ===== */

.site-nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgb(10 10 10 / 80%);
    border-bottom: 1px solid var(--green-20);
    padding: 1.5rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-modal);
}

.nav-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 var(--container-padding-x);
}

/* ===== LOGO ===== */

.logo {
    align-items: center;
    color: var(--green);
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    gap: var(--spacing-xs);
    text-decoration: none;
    transition: all 0.3s ease;
}

.logo:hover {
    color: var(--green-neon);
}

.logo:hover .logo-img {
    filter: brightness(1.3);
}

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

.logo-text {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo-cursor {
    animation: blink 1s infinite;
    color: var(--green-neon);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 0.3rem;
}

/* ===== DESKTOP NAVIGATION LINKS ===== */

.nav-links {
    align-items: center;
    display: flex;
    gap: var(--spacing-2xl);
    list-style: none;
}

.nav-links a {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-links a::before {
    color: var(--green);
    content: '//';
    margin-right: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-links a:hover::before {
    opacity: 1;
}

.nav-links a:hover {
    color: var(--green-neon);
}

/* Active state for scroll spy */
.nav-links a.active {
    color: var(--green);
}

.nav-links a.active::before {
    opacity: 1;
}

/* ===== LANGUAGE SWITCHER (DESKTOP) ===== */

.lang-switcher {
    align-items: center;
    display: flex;
    gap: var(--spacing-xs);
    margin-left: 2rem;
}

.lang-link {
    border-radius: var(--radius-small);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.lang-link:hover {
    color: var(--green-neon);
}

.lang-link.active {
    background: var(--green-15);
    color: var(--green);
}

/* ===== MOBILE MENU TOGGLE BUTTON ===== */

.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    z-index: calc(var(--z-modal) + 2);
}

.mobile-menu-toggle span {
    background: var(--green);
    border-radius: 2px;
    height: 2px;
    transition: all 0.3s ease;
    width: 25px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== MOBILE MENU OVERLAY ===== */

.mobile-menu-overlay {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgb(10 10 10 / 98%);
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 100%;
    z-index: calc(var(--z-modal) + 1);
}

.mobile-menu-close {
    background: none;
    border: none;
    color: var(--green);
    cursor: pointer;
    font-size: 3rem;
    line-height: 1;
    padding: 1rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: all 0.3s ease;
    z-index: calc(var(--z-modal) + 2);
}

.mobile-menu-close:hover {
    color: var(--green-neon);
    transform: rotate(90deg);
}

.mobile-menu-close span {
    display: block;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    height: 100%;
    justify-content: center;
}

/* ===== MOBILE NAVIGATION LINKS ===== */

.mobile-nav-links {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-links a {
    color: var(--text-light);
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-nav-links a::after {
    background: var(--green);
    bottom: -5px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    transition: width 0.3s ease;
    width: 0;
}

.mobile-nav-links a:hover {
    color: var(--green);
}

.mobile-nav-links a:hover::after {
    width: 100%;
}

/* Active state for scroll spy */
.mobile-nav-links a.active {
    color: var(--green);
}

.mobile-nav-links a.active::after {
    width: 100%;
}

/* ===== LANGUAGE SWITCHER (MOBILE) ===== */

.mobile-lang-switcher {
    display: flex;
    gap: var(--spacing-md);
}

.mobile-lang-link {
    border-radius: var(--radius-small);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-lang-link:hover {
    color: var(--green-neon);
}

.mobile-lang-link.active {
    background: var(--green-15);
    color: var(--green);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/**
 * Breakpoint Strategy:
 * BASE (0-1023px): Mobile & Tablet - hamburger menu
 * LG (1024px+): Desktop - full navigation
 */

/* MOBILE & TABLET: Show hamburger menu, hide desktop nav */
@media (max-width: 1023px) {
    /* Hide desktop navigation */
    .nav-links {
        display: none;
    }

    .lang-switcher {
        display: none;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Logo adjustments for mobile */
    .logo-img {
        height: 35px;
    }

    /* Nav container fluid padding */
    .nav-container {
        padding: 0 clamp(1rem, 4vw, 2rem);
    }

    /* Mobile nav - fluid typography */
    .mobile-nav-links a {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .mobile-lang-link {
        font-size: clamp(1rem, 3vw, 1.2rem);
        padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
    }
}

/* DESKTOP: Show full navigation, hide hamburger */
@media (min-width: 1024px) {
    /* Hide mobile menu elements */
    .mobile-menu-toggle {
        display: none;
    }

    .mobile-menu-overlay {
        display: none;
    }

    /* Desktop nav visible */
    .nav-links {
        display: flex;
    }

    .lang-switcher {
        display: flex;
    }
}

/* === layout/footer.css === */
/**
 * Footer Layout
 * Site footer, footer grid, links, contact info
 */

/* ===== MAIN FOOTER ===== */

.site-footer {
    background: var(--dark-card);
    border-top: 1px solid var(--green-20);
    color: var(--text-light);
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-xl) 0 var(--spacing-sm);
}

.footer-container {
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 var(--container-padding-x);
}

/* ===== FOOTER GRID ===== */

.footer-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: var(--spacing-2xl);
}

.footer-column {
    display: flex;
    flex-direction: column;
}

/* ===== FOOTER TITLE ===== */

.footer-title {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
}

.footer-title::before {
    color: var(--green-neon);
    content: '// ';
    margin-right: 0.5rem;
}

.footer-description {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.7;
}

/* ===== FOOTER LINKS ===== */

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links.footer-links-spaced {
    margin-top: 15px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-light);
    display: inline-block;
    font-family: var(--font-sans);
    opacity: 0.7;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease, opacity 0.3s ease;
}

.footer-links a::before {
    color: var(--green);
    content: '→ ';
    margin-right: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-links a:hover::before {
    opacity: 1;
}

.footer-links a:hover {
    color: var(--green-neon);
    opacity: 1;
    padding-left: 5px;
}

/* ===== FOOTER CONTACT ===== */

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact li {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 12px;
    opacity: 0.7;
}

.footer-contact strong {
    color: var(--green);
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    margin-bottom: 5px;
}

.footer-contact strong::before {
    color: var(--green-neon);
    content: '$ ';
}

.footer-contact a {
    color: var(--green);
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact a:hover {
    color: var(--green-neon);
    text-shadow: 0 0 10px rgb(184 255 155 / 50%);
}

/* ===== FOOTER BOTTOM ===== */

.footer-bottom {
    border-top: 1px solid var(--green-20);
    padding-top: var(--spacing-md);
    text-align: center;
}

.footer-bottom p {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 640px) {

    /* Footer spacing */
    .site-footer {
        margin-top: 40px;
        padding: 30px 0 15px;
    }

    /* Footer grid - 1 sloupec na mobilu */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 20px;
    }

    /* Footer titles - menší */
    .footer-title {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    /* Footer description - menší */
    .footer-description {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Footer links - kompaktnější spacing */
    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        font-size: 0.9rem;
    }

    .footer-links.footer-links-spaced {
        margin-top: 10px;
    }

    /* Footer contact - menší */
    .footer-contact li {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .footer-contact strong {
        font-size: 0.85rem;
    }

    /* Footer bottom - menší */
    .footer-bottom {
        padding-top: 15px;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }
}


/* === components/buttons.css === */
/**
 * Button Components
 * Primary, secondary, and button modifiers
 */

/* ===== BASE BUTTON ===== */

.btn {
    border: none;
    border-radius: var(--radius-small);
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1.2rem 3rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* ===== BUTTON VARIANTS ===== */

.btn-primary {
    background: var(--green);
    border: 2px solid var(--green);
    color: var(--dark);
}

.btn-primary:hover {
    background: transparent;
    box-shadow: 0 10px 40px var(--green-40);
    color: var(--green);
    transform: translateY(-3px);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--green);
}

.btn-secondary:hover {
    background: var(--green);
    box-shadow: 0 10px 40px var(--green-40);
    color: var(--dark);
    transform: translateY(-3px);
}

/* ===== BUTTON MODIFIERS ===== */

/* Shine effect */
.btn-shine {
    overflow: hidden;
    position: relative;
}

.btn-shine::before {
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent);
    content: '';
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transition: left 0.3s ease;
    width: 100%;
}

.btn-shine:hover::before {
    left: 100%;
}

/* Size modifiers */
.btn-large {
    font-size: 1.1rem;
    padding: 1.25rem 3rem;
}

.btn-small {
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {
    .btn {
        font-size: 0.875rem;
        letter-spacing: 0.5px;
        padding: 1rem 1.5rem;
    }

    .btn-large {
        font-size: 1rem;
        padding: 1.1rem 2rem;
    }
}


/* === components/cards.css === */
/**
 * Card Components
 * Portfolio cards, service cards, and other card-based UI elements
 * Base .card system with modifiers for consistency across all pages
 */

/* ===== BASE CARD SYSTEM ===== */

/* Shared by: solution-card, fact-card, result-card, expect-card, challenge-item, etc. */

.card {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-medium);
    padding: 2.5rem;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--green);
    box-shadow: 0 15px 50px var(--green-20);
    transform: translateY(-5px);
}

/* Card Modifiers - Background */
.card--glass {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgb(26 26 26 / 60%);
}

.card--glass:hover {
    background: rgb(26 26 26 / 80%);
}

.card--dark {
    background: var(--dark);
}

.card--gradient {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
}

.card--highlight {
    background: var(--green-10);
    border-color: var(--green);
}

/* Card Modifiers - Layout */
.card--center {
    text-align: center;
}

.card--padding-large {
    padding: 3rem;
}

.card--padding-xl {
    padding: 3.5rem;
}

.card--padding-small {
    padding: 2rem;
}

.card--padding-compact {
    padding: 1.5rem;
}

/* Card Modifiers - Borders */
.card--border-left {
    border-left: 4px solid var(--green);
}

.card--border-left-orange {
    border-left: 4px solid var(--orange);
}

.card--border-left-red {
    border-left: 4px solid #ff6b6b;
}

.card--radius-small {
    border-radius: var(--radius-small);
}

/* Card Modifiers - Hover Effects */
.card--hover-subtle {
    box-shadow: 0 10px 30px var(--green-20);
}

.card--hover-intense:hover {
    box-shadow: 0 20px 60px var(--green-30);
}

.card--hover-shift:hover {
    transform: translateX(5px);
}

/* Card Modifiers - Animations */
.card--fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* ===== PORTFOLIO CARD BASE ===== */

.portfolio-card {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-medium);
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio-card::before {
    background: linear-gradient(90deg, var(--green) 0%, var(--green-50) 100%);
    content: '';
    height: 4px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease;
}

.portfolio-card:hover {
    border-color: var(--green);
    box-shadow: 0 15px 40px var(--green-20);
    transform: translateY(-5px);
}

.portfolio-card:hover::before {
    opacity: 1;
}

/* ===== SERVICE CARD BASE ===== */

.service-card-link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.service-card {
    background: linear-gradient(135deg, var(--dark-lighter) 0%, var(--dark-card) 100%);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    overflow: hidden;
    padding: 3.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.service-card::after {
    background: linear-gradient(90deg, var(--green), transparent);
    bottom: 0;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    width: 100%;
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-card:hover {
    border-color: var(--green);
    box-shadow: 0 20px 60px var(--green-20);
    transform: translateY(-10px);
}

.service-icon {
    color: var(--green);
    display: inline-block;
    margin-bottom: 2rem;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.service-icon svg {
    height: var(--icon-lg);
    stroke: currentcolor;
    width: var(--icon-lg);
}

.service-card:hover .service-icon {
    opacity: 1;
    transform: scale(1.1);
}

.service-card h3 {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2vw + 0.8rem, 1.8rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-light);
    font-family: var(--font-sans);
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: 2rem;
}

.tag {
    background: var(--green-05);
    border: 1px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--green);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.service-card:hover .tag {
    background: var(--green-10);
    border-color: var(--green-neon);
}

.service-example {
    background: var(--green-05);
    border-left: 3px solid var(--green);
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    padding: 1.5rem;
}

.service-example strong {
    color: var(--green-neon);
}

.service-example-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-example-clickable:hover {
    background: var(--green-10);
    border-left-width: 5px;
    transform: translateX(4px);
}

/* ===== CARD UTILITIES ===== */

.card-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover-lift:hover {
    box-shadow: 0 15px 40px rgb(0 0 0 / 30%);
    transform: translateY(-5px);
}

/* ===== PORTFOLIO CARD DETAILS ===== */

.portfolio-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-3xl);
    max-width: var(--container-2xl);
}

.portfolio-image {
    align-items: center;
    background: var(--gradient-dark-card);
    display: flex;
    height: 280px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.portfolio-image-placeholder {
    background: linear-gradient(135deg, var(--green-10) 0%, var(--green-05) 100%);
    position: relative;
}

.portfolio-image-placeholder::before {
    background-image: radial-gradient(circle, var(--green-10) 1px, transparent 1px);
    background-size: 20px 20px;
    content: '';
    inset: 0;
    position: absolute;
}

.portfolio-placeholder-content {
    text-align: center;
    z-index: var(--z-base);
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    opacity: 0.3;
}

.placeholder-text {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.4;
}

.portfolio-image img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    width: 100%;
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.05);
}

.portfolio-overlay {
    align-items: center;
    background: rgb(10 10 10 / 80%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

.view-case {
    color: var(--green);
    font-size: 1.1rem;
    font-weight: 600;
}

.portfolio-content {
    padding: var(--spacing-xl);
}

.portfolio-client {
    margin-bottom: 12px;
}

.client-logo-small {
    background: var(--green-10);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-block;
    font-family: var(--font-mono-short);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.portfolio-card h3 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 12px;
}

.portfolio-description {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
    opacity: 0.85;
}

.portfolio-meta {
    border-top: 1px solid var(--green-20);
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(4, 1fr);
    padding-top: 24px;
}

.portfolio-meta-item {
    text-align: center;
}

.portfolio-meta-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.portfolio-meta-value {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ===== MOBILE RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 640px) {

    /* Service Cards */
    .service-card {
        padding: 1.5rem;
    }

    .service-icon {
        margin-bottom: 1rem;
    }

    .service-icon svg {
        height: 40px;
        width: 40px;
    }

    .service-card h3 {
        margin-bottom: 0.75rem;
    }

    .service-card p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    /* Portfolio Cards */
    .portfolio-grid {
        grid-template-columns: 1fr !important; /* Override auto-fit minmax(380px) */
    }

    .portfolio-image {
        height: 200px;
    }

    .placeholder-icon {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .placeholder-text {
        font-size: 1.5rem;
    }

    .portfolio-content {
        padding: 1.5rem;
    }

    .portfolio-card h3 {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .portfolio-description {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .portfolio-meta {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding-top: 1rem;
    }

    .portfolio-meta-label {
        font-size: 0.65rem;
    }

    .portfolio-meta-value {
        font-size: 0.85rem;
    }
}

/* === components/hero.css === */
/**
 * Hero Sections - Base Styles
 * Všechny hero sekce používají class="hero" + page-specific class
 * Např: class="hero about-hero", class="hero contact-hero"
 *
 * Page-specific override jen když je potřeba (v page CSS)
 */

/* ===== BASE HERO ===== */

.hero {
    background: var(--gradient-hero);
    overflow: hidden;
    padding: clamp(6rem, 15vh, 10rem) var(--container-padding-x) clamp(4rem, 10vh, 6rem);
    position: relative;
}

/* Grid background */
.hero .grid-bg {
    background-image: radial-gradient(circle, var(--green-15) 1px, transparent 1px);
    background-size: 30px 30px;
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

/* Dekorativní elementy */
.hero .hero-decoration {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.hero .deco-circle {
    border: 2px solid var(--green);
    border-radius: var(--radius-circle);
    opacity: 0.12;
    position: absolute;
}

.hero .deco-circle.deco-1 {
    animation: float 25s ease-in-out infinite;
    height: 350px;
    right: 5%;
    top: -150px;
    width: 350px;
}

.hero .deco-circle.deco-2 {
    animation: float 18s ease-in-out infinite reverse;
    bottom: -80px;
    height: 180px;
    left: 8%;
    width: 180px;
}

.hero .deco-line {
    background: linear-gradient(to bottom, transparent, var(--green), transparent);
    height: 200px;
    opacity: 0.15;
    position: absolute;
    width: 2px;
}

.hero .deco-line.deco-3 {
    animation: pulse-green 5s ease-in-out infinite;
    left: 20%;
    top: 15%;
}

.hero .deco-line.deco-4 {
    animation: pulse-green 6s ease-in-out infinite 1s;
    height: 120px;
    right: 10%;
    top: 50%;
}

/* Hero content */
.hero-content {
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 var(--container-padding-x);
    position: relative;
    z-index: var(--z-base);
}

/* Hero label badge */
.hero-label {
    background: rgb(155 179 156 / 10%);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0;
    margin-bottom: 2rem;
    padding: 8px 16px;
    text-transform: uppercase;
}

/* Hero typography */
.hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    color: var(--text-light);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 3rem;
    max-width: var(--container-sm);
    opacity: 0.8;
}

/* ===== HOMEPAGE HERO (fullscreen variant) ===== */

.homepage-hero {
    align-items: center;
    background: var(--gradient-hero);
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 140px;
    position: relative;
}

.homepage-hero .hero-content {
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 var(--container-padding-x);
    position: relative;
    z-index: var(--z-dropdown);
}

.homepage-hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.homepage-hero h1 .highlight {
    color: var(--green);
    display: inline-block;
    position: relative;
}

.homepage-hero h1 .highlight::after {
    animation: blink 1s infinite;
    color: var(--green-neon);
    content: '_';
}

.terminal-text {
    color: var(--text-light);
    font-family: var(--font-mono-short);
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.3rem);
    margin-bottom: 3rem;
    opacity: 0.9;
}

.terminal-text::before {
    color: var(--green);
    content: '$ ';
}

/* Desktop/Mobile text variants */
.terminal-text-mobile {
    display: none;
}

.hero-ctas {
    display: flex;
    gap: var(--spacing-md);
}

/* ===== SERVICE HERO (má badge) ===== */

.service-badge {
    background: rgb(155 179 156 / 10%);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-block;
    font-family: var(--font-mono-short);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    padding: 8px 16px;
}

.service-hero-cta {
    display: flex;
    gap: var(--spacing-md);
}

.terminal-prompt {
    color: var(--green-neon);
    margin-right: 0.5rem;
}

/* ===== CODE RAIN EFFECT (homepage) ===== */

.code-rain {
    height: 100%;
    left: 0;
    opacity: 0.1;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

.code-line {
    animation: slideCode 20s linear infinite;
    color: var(--green);
    font-size: 0.8rem;
    position: absolute;
    white-space: nowrap;
}

/* ===== RESPONSIVE - MOBILE OPTIMIZATION ===== */

/* Extra small phones (390px and below) - iPhone 12, iPhone 12 Pro */
@media (max-width: 400px) {
    .homepage-hero h1 {
        font-size: clamp(2.25rem, 7vw, 5.5rem);
    }
}

/* Mobile (do 640px): Tlačítka pod sebou, full-width */
@media (max-width: 640px) {
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }

    /* Homepage hero - menší výška na mobilu */
    .homepage-hero {
        min-height: auto;
        padding: 8rem var(--container-padding-x) 4rem;
    }

    /* Terminal text - mobile variant */
    .terminal-text-desktop {
        display: none;
    }

    .terminal-text-mobile {
        display: block;
        font-size: 0.95rem;
    }
}

/* === components/forms.css === */
/**
 * Form Components
 * Contact forms, inputs, textareas, checkboxes, submit buttons
 */

/* ===== FORM SECTION ===== */

.contact-form-section {
    background: var(--dark-card);
    padding: var(--section-padding);
    position: relative;
}

.contact-form-section .container {
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 0 3rem;
}

/* ===== FORM CONTAINER ===== */

.contact-form-container {
    background: var(--dark-lighter);
    border: 2px solid var(--green-30);
    border-radius: var(--radius-small);
    margin: 4rem auto 0;
    max-width: var(--container-md);
    padding: 3rem;
    position: relative;
    text-align: left;
}

.contact-form-container::before {
    background: var(--dark-card);
    color: var(--green);
    content: '> contact_form.init()';
    font-family: var(--font-mono-short);
    font-size: 0.85rem;
    left: 20px;
    padding: 0 10px;
    position: absolute;
    top: -15px;
}

.contact-form-wrapper h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.contact-form {
    /* max-width and margin handled in pages/contact.css */
}

/* ===== FORM GROUP ===== */

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    color: var(--green);
    display: block;
    font-family: var(--font-mono-short);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.form-group label::before {
    color: var(--green-neon);
    content: '$ ';
}

/* ===== FORM CONTROLS ===== */

.form-control,
.form-group input,
.form-group textarea {
    background: var(--dark);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    color: var(--text-light);
    font-family: var(--font-mono-short);
    font-size: 1rem;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
    width: 100%;
}

.form-control:focus,
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-10);
}

/* Enhanced focus for keyboard navigation */
.form-control:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    box-shadow: 0 0 0 3px var(--green-20);
}

.form-control::placeholder {
    color: rgb(224 224 224 / 30%);
    font-family: var(--font-mono-short);
}

textarea.form-control,
.form-group textarea {
    font-family: var(--font-mono-short);
    line-height: 1.6;
    min-height: 150px;
    resize: vertical;
}

/* ===== FORM ROW ===== */

.form-row {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--spacing-lg);
}

/* ===== CHECKBOX ===== */

.form-checkbox {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    align-items: flex-start;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    font-size: 0.9rem;
    gap: 0.75rem;
    line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--green);
    cursor: pointer;
    height: 20px;
    margin-top: 2px;
    width: 20px;
}

/* ===== SUBMIT BUTTON ===== */

.form-submit {
    background: var(--green);
    border: 2px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--dark);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1.25rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
}

.form-submit:hover:not(:disabled) {
    background: transparent;
    box-shadow: 0 0 30px var(--green-30);
    color: var(--green);
}

.form-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== FORM MESSAGES ===== */

.form-message {
    border-radius: var(--radius-small);
    display: none;
    font-family: var(--font-mono-short);
    font-size: 0.95rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
}

.form-message.success {
    background: var(--green-20);
    border: 1px solid var(--green);
    color: var(--green-neon);
    display: block;
}

.form-message.error {
    background: rgb(255 107 53 / 20%);
    border: 1px solid var(--orange);
    color: var(--orange);
    display: block;
}

.form-message::before {
    color: var(--green-neon);
    content: '> ';
}



/* === components/faq.css === */
/**
 * FAQ Component
 * Modern accordion design with numbered items, Q/A prefixes, and smooth animations
 * Shared across service pages and contact page
 */

/* ===== FAQ GRID ===== */

.faq-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.section-title + .faq-grid {
    margin-top: 4rem;
}

/* ===== FAQ ITEM ===== */

.faq-item {
    background: var(--dark-lighter);
    border: 2px solid var(--green-10);
    border-radius: var(--radius-medium);
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated left border on hover */
.faq-item::before {
    background: var(--green);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    width: 4px;
}

.faq-item:hover::before {
    transform: scaleY(1);
}

.faq-item:hover {
    border-color: var(--green-30);
    box-shadow: 0 8px 24px rgb(155 179 156 / 10%);
}

/* ===== FAQ QUESTION ===== */

.faq-question {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: var(--spacing-lg);
    padding: 2rem 2.5rem;
    position: relative;
}

/* Numbered circle */
.faq-number {
    align-items: center;
    background: var(--green-10);
    border: 2px solid var(--green);
    border-radius: 50%;
    color: var(--green);
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-mono-short);
    font-size: 1.1rem;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    transition: all 0.3s ease;
    width: 48px;
}

.faq-item:hover .faq-number {
    background: var(--green);
    color: var(--dark);
    transform: rotate(5deg) scale(1.05);
}

.faq-question-content {
    flex: 1;
}

.faq-item h3 {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

.faq-item h3::before {
    color: var(--green);
    content: 'Q: ';
    font-family: var(--font-mono-short);
    margin-right: 0.5rem;
}

/* ===== FAQ TAGS (optional) ===== */

.faq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.faq-tag {
    background: var(--green-05);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    text-transform: uppercase;
}

/* ===== FAQ ANSWER ===== */

.faq-answer {
    padding: 0 2.5rem 2rem;
    padding-left: calc(2.5rem + 48px + var(--spacing-lg));
}

.faq-answer p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    max-width: 80ch;
    opacity: 0.9;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer p::before {
    color: var(--green);
    content: 'A: ';
    font-family: var(--font-mono-short);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Remove A: prefix from subsequent paragraphs in same answer */
.faq-answer p + p::before {
    content: '';
    margin-right: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .faq-question {
        padding: 1.5rem;
    }

    .faq-number {
        height: 40px;
        width: 40px;
        font-size: 1rem;
    }

    .faq-item h3 {
        font-size: 1.1rem;
    }

    .faq-answer {
        padding: 0 1.5rem 1.5rem;
        padding-left: calc(1.5rem + 40px + var(--spacing-md));
    }

    .faq-answer p {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .faq-question {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: 1.5rem;
    }

    .faq-number {
        height: 36px;
        width: 36px;
        font-size: 0.95rem;
    }

    .faq-item h3 {
        font-size: 1.05rem;
    }

    .faq-answer {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .faq-answer p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

/* === components/cta.css === */
/**
 * CTA (Call-to-Action) Component
 * Shared green gradient CTA section across all pages
 * Used on: home, services, about, portfolio
 */

/* ===== CTA SECTION ===== */

.cta-section {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 100%);
    border-top: 1px solid var(--green-20);
    color: var(--white);
    overflow: hidden;

    padding: var(--spacing-4xl) var(--container-padding-x);
    position: relative;
    text-align: left;
}

.cta-section .container {
    margin: 0 auto;
    max-width: var(--container-xl);
    position: relative;
    z-index: 1;
}

/* Grid pattern background */
.cta-section::before {
    background:
        linear-gradient(var(--green-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--green-05) 1px, transparent 1px);
    background-size: 100px 100px;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Heading */
.cta-section h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
    font-weight: 900;
    margin-bottom: 2rem;
}

/* Highlighted part of heading */
.cta-section h2 .highlight {
    color: var(--green-neon);
}

/* Subtitle */
.cta-section p {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    margin: 0 0 3rem;
    max-width: var(--container-md);
    opacity: 0.8;
    text-align: left;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .cta-section p {
        font-size: 1.1rem;
    }
}

/* === components/cookie-banner.css === */
/**
 * Cookie Banner & Modal
 * Cookie consent banner and settings modal
 */

        .cookie-settings-btn {
            background: var(--green);
            border: 2px solid var(--green);
            border-radius: var(--radius-small);
            color: var(--dark);
            cursor: pointer;
            display: inline-block;
            font-family: var(--font-sans);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin: 20px 0;
            padding: 12px 24px;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .cookie-settings-btn:hover {
            background: transparent;
            box-shadow: 0 0 20px var(--green-40);
            color: var(--green);
        }

.cookie-banner {
    animation: slideUp 0.4s ease-out;
    background: var(--dark-card);
    border-top: 2px solid var(--green);
    bottom: 0;
    box-shadow: 0 -4px 20px var(--green-30);
    left: 0;
    position: fixed;
    right: 0;
    z-index: var(--z-tooltip);
}

.cookie-banner-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-xl);
    align-items: center;
    margin: 0 auto;
    max-width: var(--container-xl);
    padding: 20px 40px;
}

@media (max-width: 768px) {
    .cookie-banner-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

.cookie-banner-text {
    align-items: flex-start;
    display: flex;
    flex: 1;
    gap: var(--spacing-md);
}

.cookie-icon {
    flex-shrink: 0;
    font-size: 2rem;
}

.cookie-message h3 {
    color: var(--green-neon);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.cookie-message h3::before {
    color: var(--green);
    content: '> ';
}

.cookie-message p {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
}

.cookie-message a {
    border-bottom: 1px solid var(--green);
    color: var(--green);
    text-decoration: none;
    transition: color 0.3s ease;
}

.cookie-message a:hover {
    color: var(--green-neon);
}

.cookie-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-sm);
}

@media (max-width: 768px) {
    .cookie-banner-actions {
        flex-direction: column;
        width: 100%;
    }
}

.cookie-btn {
    border-radius: var(--radius-small);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cookie-btn-primary {
    background: var(--green);
    border: 2px solid var(--green);
    color: var(--dark);
}

.cookie-btn-primary:hover {
    background: transparent;
    box-shadow: 0 0 20px var(--green-40);
    color: var(--green);
}

.cookie-btn-secondary {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--green);
}

.cookie-btn-secondary:hover {
    background: var(--green-10);
}

.cookie-btn-text {
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-light);
    opacity: 0.6;
}

.cookie-btn-text:hover {
    color: var(--text-light);
    opacity: 1;
}

.cookie-modal {
    align-items: center;
    animation: fadeIn 0.3s ease-out;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: var(--z-notification);
}

.cookie-modal-overlay {
    backdrop-filter: blur(5px);
    background: rgb(10 10 10 / 90%);
    inset: 0;
    position: absolute;
}

.cookie-modal-content {
    animation: slideDown 0.3s ease-out;
    background: var(--dark-lighter);
    border: 2px solid var(--green);
    border-radius: var(--radius-small);
    box-shadow: 0 10px 40px var(--green-30);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 600px;
    position: relative;
    width: 90%;
}

.cookie-modal-header {
    align-items: center;
    border-bottom: 1px solid var(--green-20);
    display: flex;
    justify-content: space-between;
    padding: 25px;
}

.cookie-modal-header h2 {
    color: var(--green-neon);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin: 0;
}

.cookie-modal-header h2::before {
    color: var(--green);
    content: '// ';
}

.cookie-modal-close {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 2rem;
    height: 30px;
    line-height: 1;
    opacity: 0.5;
    padding: 0;
    transition: all 0.3s ease;
    width: 30px;
}

.cookie-modal-close:hover {
    color: var(--green);
    opacity: 1;
}

.cookie-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
}

.cookie-modal-intro {
    color: var(--text-light);
    font-family: var(--font-sans);
    margin-bottom: 20px;
    opacity: 0.8;
}

.cookie-category {
    background: var(--green-03);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    margin-bottom: 20px;
    padding: 20px;
}

.cookie-category-header {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing-md);
}

.cookie-toggle {
    display: inline-block;
    flex-shrink: 0;
    height: 26px;
    position: relative;
    width: 50px;
}

.cookie-toggle input {
    height: 0;
    opacity: 0;
    width: 0;
}

.cookie-toggle-slider {
    background-color: var(--green-20);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-medium);
    cursor: pointer;
    inset: 0;
    position: absolute;
    transition: all 0.3s ease;
}

.cookie-toggle-slider::before {
    background-color: var(--text-light);
    border-radius: var(--radius-circle);
    bottom: 3px;
    content: "";
    height: 20px;
    left: 3px;
    position: absolute;
    transition: all 0.3s ease;
    width: 20px;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: var(--green);
    border-color: var(--green);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    cursor: not-allowed;
    opacity: 0.5;
}

.cookie-category-info {
    flex: 1;
}

.cookie-category-info h3 {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.cookie-category-description {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin: 0 0 10px;
    opacity: 0.7;
}

.cookie-details-toggle {
    background: none;
    border: none;
    color: var(--green);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0;
    transition: color 0.3s ease;
}

.cookie-details-toggle:hover {
    color: var(--green-neon);
}

.cookie-details {
    border-top: 1px solid var(--green-20);
    margin-top: 10px;
    padding-top: 10px;
}

.cookie-details ul {
    margin: 0;
    padding-left: 20px;
}

.cookie-details li {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-bottom: 5px;
    opacity: 0.7;
}

.cookie-details code {
    background: var(--green-10);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 2px 6px;
}

.cookie-modal-footer {
    border-top: 1px solid var(--green-20);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding: 20px 25px;
}

@media (max-width: 768px) {
    .cookie-modal-footer {
        flex-direction: column;
    }
}

/* === pages/home.css === */
/**
 * Homepage Specific Styles
 * Stats, problems, services, case studies, clients, CTA sections
 * NOTE: .section-title a .section-subtitle používají sdílené styly z base/typography.css
 */

/* ===== STATS SECTION ===== */

.stats {
    /* Uses .grid-4 and .gap-lg utility classes */
    margin-top: 2rem;
}

.stat-item {
    background: var(--green-05);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: var(--green-10);
    border-color: var(--green);
    transform: translateY(-5px);
}

.stat-number {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 3rem;
    font-weight: 900;
}

.stat-label {
    color: var(--text-light);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 0.5rem;
    opacity: 0.7;
    text-transform: uppercase;
}

/* ===== PROBLEMS/CHALLENGES GRID ===== */

.problems-grid {
    /* Uses .grid-2 and .gap-lg utility classes */
    margin-top: 2rem;
}

/* ===== SERVICES GRID ===== */

.services-grid {
    /* Uses .grid-2 and .gap-2xl utility classes */
}

/* Tablet override: Služby a Portfolio mají dlouhé texty, zalomit na 1 sloupec */
@media (max-width: 1023px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== CLIENTS GRID ===== */

.clients-grid {
    /* Uses .grid-4 and .gap-2xl utility classes */
    align-items: center;
}

/* ===== CTA SECTION ===== */

/* Moved to line ~288 to avoid duplication */

/* ===== FLOATING CODE BLOCKS ===== */

.floating-code {
    opacity: 0.3;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
}

.code-block {
    animation: float 6s ease-in-out infinite;
    background: rgb(17 17 17 / 90%);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    box-shadow: 0 10px 50px var(--green-20);
    font-size: 0.85rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
}

.code-block:nth-child(2) {
    animation-delay: 2s;
    margin-left: 3rem;
}

.code-block:nth-child(3) {
    animation-delay: 4s;
}

.code-header {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: 1rem;
}

.code-dot {
    background: var(--green);
    border-radius: var(--radius-circle);
    height: 12px;
    width: 12px;
}

.code-line-item .keyword {
    color: var(--green);
}

.code-line-item .string {
    color: var(--green-neon);
}

/* ===== SECTION TITLES ===== */

/* section-title & section-subtitle jsou definovány v base/typography.css */

/* ===== PROBLEM CARDS ===== */

.problem-card {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-small);
    overflow: hidden;
    padding: 3rem;
    position: relative;
    transition: all 0.3s ease;
}

.problem-card::before {
    background: linear-gradient(135deg, var(--green-05) 0%, transparent 100%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
}

.problem-card:hover::before {
    opacity: 1;
}

.problem-card:hover {
    border-left-width: 8px;
    box-shadow: -10px 10px 40px var(--green-20);
    transform: translateX(5px);
}

.problem-number {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.3;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.problem-card h3 {
    color: var(--green-neon);
    font-family: var(--font-sans);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.problem-card p {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.8;
}

/* ===== CLIENT ITEM ===== */

.client-item {
    align-items: center;
    background: var(--green-03);
    border: 1px solid var(--green);
    border-radius: var(--radius-medium);
    color: var(--text-muted-light);
    display: flex;
    font-size: 1.5rem;
    font-weight: 700;
    justify-content: center;
    min-height: 150px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.client-item:hover {
    background: var(--green-10);
    border-color: var(--green);
    color: var(--text-light);
    transform: scale(1.05);
}

/* ===== CTA SECTION ===== */

/* CTA component now in components/cta.css (shared across all pages) */

/* Related Services Section */
.related-services-grid {
    /* Uses .grid-auto-300 utility class + custom gap */
    gap: 2rem;
    margin-top: 2rem;
}

.related-service-card {
    background: var(--dark-lighter);
    border: 1px solid var(--green-10);
    border-radius: var(--radius-medium);
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2.5rem;
    position: relative;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-service-card::before {
    background: linear-gradient(135deg, var(--green-10) 0%, transparent 100%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
}

.related-service-card:hover {
    border-color: var(--green);
    box-shadow: 0 10px 30px rgb(155 179 156 / 20%);
    transform: translateY(-5px);
}

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

.related-service-icon {
    color: var(--green);
    font-size: 2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.related-service-card h3 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.related-service-card p {
    color: var(--text-dim);
    flex-grow: 1;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.related-service-link {
    align-items: center;
    color: var(--green);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.5rem;
    position: relative;
    transition: gap 0.3s ease;
    z-index: 1;
}

.related-service-card:hover .related-service-link {
    gap: 0.75rem;
}


/* ===== PORTFOLIO CARDS - "Realizované projekty" - extracted from old CSS lines 832-1065 ===== */

/* Portfolio cards use base styles from components/cards.css */

.portfolio-tech {
    border-top: 1px solid var(--green-10);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
}

.tech-badge {
    background: var(--green-05);
    border: 1px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--text-light);
    display: inline-block;
    font-family: var(--font-mono-short);
    font-size: 0.8rem;
    padding: 5px 12px;
}

/* ===== APPROACH SECTION ("Jak pracujeme") ===== */

.approach-section {
    /* Uses .section.section--large class for padding (100px vertical, 48px horizontal) */
}

.approach-intro {
    margin: 40px auto 60px;
    text-align: center;
}

.approach-intro p {
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1.8;
}

.approach-steps {
    /* Uses .grid-2 and .gap-xl utility classes */
    margin: 2rem 0;
}

.approach-step {
    background: var(--dark-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    padding: 40px 30px;
    position: relative;
    transition: all 0.3s ease;
}

.approach-step:hover {
    border-color: var(--green);
    box-shadow: 0 10px 30px var(--green-15);
    transform: translateY(-5px);
}

.approach-number {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    border-radius: var(--radius-circle);
    color: var(--dark);
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    height: 60px;
    line-height: 60px;
    margin-bottom: 20px;
    text-align: center;
    width: 60px;
}

.approach-step h3 {
    color: var(--text-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.approach-step p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.approach-highlight {
    background: linear-gradient(135deg, var(--green-15), var(--green-10));
    border: 2px solid var(--green);
    border-radius: var(--radius-medium);
    margin: 60px auto 0;
    padding: 40px;
    text-align: center;
}

.approach-highlight p {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
}

/* ===== MOBILE RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 640px) {

    /* Stats Section */
    .stat-item {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    /* Problem Cards */
    .problem-card {
        padding: 1.5rem;
        border-left-width: 3px;
    }

    .problem-card:hover {
        border-left-width: 4px;
    }

    .problem-number {
        font-size: 3rem;
        right: 0.5rem;
        top: 0.5rem;
        opacity: 0.2;
    }

    .problem-card h3 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .problem-card p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Approach Section */
    .approach-step {
        padding: 1.5rem;
    }

    .approach-number {
        height: 50px;
        width: 50px;
        font-size: 1.3rem;
        line-height: 50px;
        margin-bottom: 1rem;
    }

    .approach-step h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .approach-step p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .approach-highlight {
        padding: 1.5rem;
    }

    .approach-highlight p {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    /* Client Items */
    .client-item {
        padding: 1.5rem 1rem;
        min-height: 80px;
        font-size: 1rem;
    }

    /* Floating Code - hide on mobile */
    .floating-code {
        display: none;
    }
}


/* === pages/about.css === */
/**
 * About Page Styles
 * About-specific overrides and components
 * Hero styles jsou v components/hero.css
 */

/* ===== ABOUT HERO OVERRIDES (pokud potřeba) ===== */

/* .about-hero může přepsat base .hero zde, pokud potřeba */

/* ===== STORY SECTION ===== */

.story-section {
    /* Uses .section class for padding (5rem/80px vertical, 48px horizontal) */
    background: var(--dark-card);
}

/* Story section uses base .container.container--narrow */

/* story section používá .section-title z base/typography.css */

.story-intro {
    color: var(--text-muted-light);
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 50px;
    text-align: center;
}

.story-content p {
    color: var(--text-muted-lighter);
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 25px;
}

/* ===== VALUES SECTION ===== */

/* Uses base .section.section-darker for background */
/* Values section uses base .container */

/* values section používá .section-title a .section-subtitle z base/typography.css */

.values-grid {
    /* Uses .grid-auto-320 and .gap-xl utility classes */
}

.value-card {
    background: var(--gradient-dark-card);
    border: 1px solid var(--text-dark);
    border-radius: var(--radius-medium);
    padding: 40px 30px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.value-card:hover {
    border-color: var(--green);
    box-shadow: 0 10px 40px var(--green-20);
    transform: translateY(-5px);
}

.value-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--icon-xl);
    margin-bottom: 20px;
    width: var(--icon-xl);
}

/* SVG Icons as background images in green color */
.icon-target {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.icon-handshake {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M16.48 10.41c-.39.39-1.04.39-1.43 0l-4.47-4.46-7.05 7.04-.66-.63a3 3 0 0 1 0-4.24l4.24-4.24a3 3 0 0 1 4.24 0l4.24 4.24c.39.39.39 1.02 0 1.41l-.11.12zM7.52 13.59c.39-.39 1.04-.39 1.43 0l4.47 4.46 7.05-7.04.66.63a3 3 0 0 1 0 4.24l-4.24 4.24a3 3 0 0 1-4.24 0l-4.24-4.24a1 1 0 0 1 0-1.41l-.89-.88zm9.81-9.82c.78.78.78 2.05 0 2.83l-1.06 1.06-2.83-2.83 1.06-1.06c.78-.78 2.05-.78 2.83 0z'/%3E%3C/svg%3E");
}

.icon-rocket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87l-1.13.75c-.56.38-.89 1-.89 1.67V19c0 .55.45 1 1 1h2.69v-.98zM18.31 20.52c.48-1.23 1.52-4.17 1.67-6.87l1.13.75c.56.38.89 1 .89 1.67V19c0 .55-.45 1-1 1h-2.69v-.98z'/%3E%3C/svg%3E");
}

.icon-lightbulb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/%3E%3C/svg%3E");
}

.icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
}

.icon-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4zm0 15V5h12v14H6z'/%3E%3C/svg%3E");
}

.icon-cloud {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z'/%3E%3C/svg%3E");
}

.icon-api {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
}

.icon-code {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
}

.icon-mobile {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zm-5-1c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z'/%3E%3C/svg%3E");
}

.icon-briefcase {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-4V5l-2-2h-4L8 5v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-10-2h4v2h-4V5zm10 15H4v-2h16v2zm0-5H4V9h16v6z'/%3E%3C/svg%3E");
}

.icon-link {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}

.icon-chart {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.icon-settings {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

.icon-globe {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.icon-tool {
    background-color: var(--green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}

.icon-alert {
    background-color: var(--orange);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.value-card h3 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.value-card p {
    color: var(--text-muted-light);
    line-height: 1.7;
}

/* ===== TEAM SECTION ===== */

/* Uses base .section.section-dark for background */
/* Team section uses base .container */

/* team section používá .section-title a .section-subtitle z base/typography.css */

.team-stats {
    /* Uses .grid-auto-200 and .gap-xl utility classes */
    margin-top: 60px;
}

.stat-card {
    background: var(--gradient-dark-card);
    border: 1px solid var(--text-dark);
    border-radius: var(--radius-medium);
    padding: var(--spacing-2xl);
    text-align: center;
}

.stat-value {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ===== EXPERTISE SECTION ===== */

.expertise-section {
    /* Uses .section class for padding */
    background: var(--dark);
}

/* Expertise section uses base .container */

/* expertise section používá .section-title a .section-subtitle z base/typography.css */

.expertise-grid {
    /* Uses .grid-auto-300 and .gap-xl utility classes */
}

.expertise-card {
    background: var(--gradient-dark-card);
    border: 1px solid var(--text-dark);
    border-radius: var(--radius-medium);
    padding: 30px;
}

.expertise-card h3 {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.skill-tag {
    background: var(--green-10);
    border: 1px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.skill-tag:hover {
    background: var(--green-20);
    border-color: var(--green);
}

/* ===== CONTACT PERSON SECTION ===== */

/* Uses base .section.section-darker for background */

/* contact-person section používá .section-title z base/typography.css */

.contact-person-split {
    border: 1px solid var(--text-dark);
    border-radius: var(--radius-medium);
    display: grid;
    grid-template-columns: 45fr 55fr;
    min-height: 500px;
    overflow: hidden;
}

.contact-person-photo-bg {
    background-position: center;
    background-size: cover;
    position: relative;
}

.photo-overlay {
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.contact-person-content {
    background: var(--gradient-dark-card);
    padding: 50px;
}

.contact-person-content h3 {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 2rem;
    margin-bottom: 8px;
}

/* ===== TIMELINE SECTION ===== */

/* Uses base .section.section-dark for background and padding */

.timeline-section {
    overflow: hidden;
    position: relative;
}

.timeline-section .container {
    /* Uses base .container class - no need to override */
}

.timeline {
    margin: 4rem auto 0;

    /* Uses .grid-4 and .gap-lg utility classes */
    max-width: var(--container-2xl);
}

.timeline-item {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-left: 4px solid var(--green);
    padding: 2.5rem 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-item::before {
    background: linear-gradient(135deg, var(--green-05) 0%, transparent 100%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
}

.timeline-item:hover::before {
    opacity: 1;
}

.timeline-item:hover {
    border-left-width: 8px;
    box-shadow: 0 15px 50px var(--green-20);
    transform: translateY(-8px);
}

.timeline-year {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.timeline-content h3 {
    color: var(--green-neon);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.timeline-content p {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
}

/* Vertical Timeline */
.timeline-vertical {
    margin: 4rem 0 0;
    max-width: var(--container-md);
    padding-left: 0;
    position: relative;
}

.timeline-vertical::before {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-30) 100%);
    bottom: 0;
    content: '';
    left: 80px;
    position: absolute;
    top: 0;
    width: 2px;
}

.timeline-item-vertical {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item-vertical:last-child {
    margin-bottom: 0;
}

.timeline-year-marker {
    align-items: flex-start;
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-sm);
    position: relative;
    width: 160px;
}

.timeline-dot {
    background: var(--green);
    border: 3px solid var(--dark-card);
    border-radius: var(--radius-circle);
    box-shadow: 0 0 20px var(--green-30);
    height: 16px;
    left: 72px;
    position: absolute;
    top: 8px;
    transition: all 0.3s ease;
    width: 16px;
    z-index: var(--z-base);
}

.timeline-item-vertical:hover .timeline-dot {
    box-shadow: 0 0 30px var(--green);
    transform: scale(1.3);
}

.timeline-year-marker .timeline-year {
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    opacity: 0.9;
}

.timeline-content-vertical {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-left: 4px solid var(--green);
    flex: 1;
    padding: 2rem 2.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-content-vertical::before {
    background: linear-gradient(135deg, var(--green-05) 0%, transparent 100%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
}

.timeline-item-vertical:hover .timeline-content-vertical {
    border-left-width: 6px;
    box-shadow: 0 10px 40px var(--green-20);
    transform: translateX(8px);
}

.timeline-item-vertical:hover .timeline-content-vertical::before {
    opacity: 1;
}

.timeline-content-vertical h3 {
    color: var(--green-neon);
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: var(--z-base);
}

.timeline-content-vertical p {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.85;
    position: relative;
    z-index: var(--z-base);
}

/* ===== CONTACT PERSON SECTION (About page only) ===== */

.contact-person-role {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.contact-person-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.contact-link {
    align-items: center;
    background: transparent;
    border: 1px solid var(--text-dark);
    border-radius: 6px;
    color: var(--text-muted-lighter);
    display: inline-flex;
    font-size: 0.95rem;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-link:hover {
    background: rgb(255 255 255 / 3%);
    border-color: var(--text-muted);
    color: var(--text);
}

.contact-link svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.contact-link:hover svg {
    opacity: 1;
}

.contact-person-specialization-section h4 {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contact-person-specialization-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

.specialization-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.specialization-column li {
    color: var(--text-muted-lighter);
    font-size: 0.95rem;
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.specialization-column li::before {
    color: var(--green);
    content: '▹';
    font-size: 1.2rem;
    left: 0;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* ===== MOBILE RESPONSIVE OPTIMIZATIONS ===== */

/* Tablet breakpoint for contact person section */
@media (max-width: 1040px) {
    /* Contact Person Split - Switch to vertical layout earlier */
    .contact-person-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .contact-person-photo-bg {
        min-height: 450px;
        background-position: center 30%;
    }

    .contact-person-content {
        padding: 40px 35px;
    }

    .contact-person-specialization-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .specialization-column li {
        padding-left: 20px !important;
    }
}

@media (max-width: 640px) {

    /* Story Section */
    .story-intro {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
    }

    .story-content p {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    /* Value Cards */
    .value-card {
        padding: 1.5rem;
    }

    .value-icon {
        height: 50px;
        width: 50px;
        margin-bottom: 15px;
    }

    .value-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .value-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Team Stats */
    .team-stats {
        margin-top: var(--spacing-xl);
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-value {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    /* Expertise Cards */
    .expertise-card {
        padding: 1.5rem;
    }

    .expertise-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .skill-tag {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    /* Contact Person Split - KRITICKÉ */
    .contact-person-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .contact-person-photo-bg {
        min-height: 250px;
    }

    .contact-person-content {
        padding: 2rem 1.5rem;
    }

    .contact-person-content h3 {
        font-size: 1.5rem;
    }

    .contact-person-role {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .contact-person-links {
        gap: 10px;
        margin-bottom: 25px;
    }

    .contact-link {
        font-size: 0.9rem;
        padding: 10px 14px;
    }

    .contact-person-specialization-section h4 {
        font-size: 0.85rem;
        margin-bottom: 15px;
        text-align: left;
    }

    .contact-person-specialization-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }

    .specialization-column li {
        font-size: 0.9rem;
        padding: 6px 0;
        padding-left: 20px;
    }

    /* Timeline - Horizontal Grid */
    .timeline {
        margin-top: 2rem;
    }

    .timeline-item {
        padding: 1.5rem;
    }

    .timeline-item:hover {
        border-left-width: 4px;
        transform: translateY(-4px);
    }

    .timeline-year {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .timeline-content h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .timeline-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Timeline - Vertical Layout - Simplified for mobile */
    .timeline-vertical::before {
        display: none; /* Hide vertical line on mobile */
    }

    .timeline-item-vertical {
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-bottom: 2.5rem;
    }

    .timeline-year-marker {
        width: auto;
    }

    .timeline-dot {
        display: none; /* Hide dot on mobile */
    }

    .timeline-year-marker .timeline-year {
        background: var(--green-10);
        border-left: 3px solid var(--green);
        color: var(--green);
        display: inline-block;
        font-size: 1.2rem;
        padding: 6px 16px;
    }

    .timeline-content-vertical {
        padding: 1.5rem;
        border-left: none;
    }

    .timeline-item-vertical:hover .timeline-content-vertical {
        border-left-width: 0;
        transform: translateY(-2px);
    }

    .timeline-content-vertical h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .timeline-content-vertical p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Large Button */
    .btn-large {
        font-size: 1rem;
        padding: 14px 30px;
    }
}


/* === pages/services.css === */
/**
 * Service Detail Pages Styles
 * Problem cards, solution grid, process timeline, tech stack, FAQ
 * NOTE: Service hero is in components/hero.css
 * NOTE: .section-title a .section-subtitle používají sdílené styly z base/typography.css
 */

/* ===== PROBLEM LIST ===== */

.problem-list {
    /* Full width - no max-width constraint */
}

.problem-item {
    animation: fadeInUp 0.8s ease-out forwards;
    background: var(--dark-lighter);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius-small);
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: 2rem;
    opacity: 0;
    padding: 2.5rem;
}

.problem-item h3 {
    font-size: 1.5rem;
}

/* ===== FAQ SECTION ===== */

/* FAQ component is now in components/faq.css (shared across pages) */

/* SERVICE DETAIL PAGES */

/* ============================================================ */

/* Solution Grid */
.solution-grid {
    /* Uses .grid-2 and .gap-xl utility classes */
}

/* Solution Card Content (uses base .card) */
.solution-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--icon-xl);
    margin-bottom: 1.5rem;
    width: var(--icon-xl);
}

.solution-grid h3 {
    color: var(--green-neon);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.solution-grid p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.solution-features {
    list-style: none;
    padding: 0;
}

.solution-features li {
    color: var(--text-light);
    font-size: 0.95rem;
    opacity: 0.7;
    padding: 0.5rem 0;
}

.solution-features li::before {
    color: var(--green);
    content: '✓ ';
    margin-right: 0.5rem;
}

/* Process Timeline */
.process-timeline {
    max-width: var(--container-md);
}

.process-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: 3rem;
    position: relative;
}

.process-step:not(:last-child)::after {
    background: linear-gradient(180deg, var(--green) 0%, transparent 100%);
    bottom: -50px;
    content: '';
    left: 35px;
    position: absolute;
    top: 80px;
    width: 2px;
}

.process-number {
    align-items: center;
    background: var(--green);
    border-radius: var(--radius-circle);
    box-shadow: 0 0 30px var(--green-40);
    color: var(--dark);
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-mono-short);
    font-size: 1.5rem;
    font-weight: 900;
    height: 70px;
    justify-content: center;
    width: 70px;
}

.process-content h3 {
    color: var(--text-light);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.process-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.process-duration {
    align-items: center;
    background: var(--green-10);
    border: 1px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-flex;
    font-family: var(--font-mono-short);
    font-size: 0.9rem;
    gap: var(--spacing-xs);
    padding: 0.5rem 1rem;
}

.duration-icon {
    font-size: 1rem;
}

/* Tech Stack */
.tech-stack {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.tech-item {
    align-items: center;
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    display: flex;
    justify-content: center;
    min-height: 100px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.tech-item:hover {
    border-color: var(--green);
    transform: translateY(-3px);
}

.tech-name {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Featured Case Study - Horizontal Split */
.case-study-featured {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-medium);
    display: grid;
    grid-template-columns: 40fr 60fr;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Left Column: Image */
.case-image-column {
    overflow: hidden;
    position: relative;
}

.case-image-column img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.case-study-clickable:hover .case-image-column img {
    transform: scale(1.05);
}

.case-study-overlay {
    background: linear-gradient(135deg, rgb(10 10 10 / 30%) 0%, rgb(26 26 26 / 20%) 100%);
    inset: 0;
    position: absolute;
    z-index: 1;
}

/* Right Column: Content */
.case-content-column {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.case-header-info {
    margin-bottom: 1.5rem;
}

.case-logo-large {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.case-industry-badge {
    background: var(--dark-card);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-block;
    font-family: var(--font-mono-short);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    padding: 8px 16px;
}

.case-meta {
    color: var(--text-light);
    display: flex;
    font-size: 0.95rem;
    gap: var(--spacing-lg);
    opacity: 0.6;
}

.case-meta span {
    align-items: center;
    display: flex;
    gap: var(--spacing-xs);
}

/* Results in Header */
.case-results-header {
    /* Uses .grid-3 and .gap-md utility classes */
    margin-top: 1.5rem;
}

.case-results-header .result-item {
    background: var(--dark-card);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.case-results-header .result-item:hover {
    background: rgb(26 26 26 / 80%);
    transform: translateY(-2px);
}

.case-results-header .result-value-wrapper {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}

.case-results-header .result-icon-small {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

/* Result icons - same SVGs as fact-icons */
.result-icon-small.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.result-icon-small.icon-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.result-icon-small.icon-apps {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
}

.result-icon-small.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

.result-icon-small.icon-bolt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}

.case-results-header .result-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
}

.case-results-header .result-value {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

/* View Project Link */
.case-view-project {
    margin-top: auto;
    padding-top: 1.5rem;
}

/* Clickable Case Study */
a.case-study-link {
    display: block;
    text-decoration: none;
}

.case-study-clickable {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.case-study-clickable:hover {
    border-color: var(--green);
    box-shadow: 0 15px 40px var(--green-20);
    transform: translateY(-5px);
}

/* Case Study Hover Overlay (same as portfolio-overlay) */
.case-study-hover-overlay {
    align-items: center;
    background: rgb(10 10 10 / 80%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.case-study-clickable:hover .case-study-hover-overlay {
    opacity: 1;
}

/* ===== CONTENT BLOCKS (deep content for SEO) ===== */

.content-blocks {
    max-width: var(--container-md);
}

.content-block {
    border-left: 3px solid var(--green-30);
    margin-bottom: 4rem;
    padding-left: 2rem;
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block__heading {
    color: var(--green-neon);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.content-block__text {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.9;
    opacity: 0.85;
}

.content-block__text p {
    margin-bottom: 1.25rem;
}

.content-block__text p:last-child {
    margin-bottom: 0;
}

.content-block__text strong {
    color: var(--text-light);
    font-weight: 600;
    opacity: 1;
}

.content-block__text a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-block__text a:hover {
    color: var(--green-neon);
}

/* ===== MOBILE RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 640px) {

    /* Content Blocks */
    .content-block {
        margin-bottom: 3rem;
    }

    .content-block__heading {
        font-size: 1.4rem;
    }

    .content-block__text {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Hero CTA Buttons */
    .service-hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .service-hero-cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Problem Items */
    .problem-item {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: 1.5rem;
    }

    .problem-icon {
        height: 40px;
        width: 40px;
    }

    .problem-item h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .problem-item p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Solution Grid */
    .solution-grid .card--padding-large {
        padding: 1.5rem;
    }

    .solution-icon {
        height: 40px;
        width: 40px;
        margin-bottom: 0.75rem;
    }

    .solution-grid h3 {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .solution-grid p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 0.75rem;
    }

    .solution-features li {
        font-size: 0.85rem;
        padding: 0.25rem 0;
    }

    /* Process Timeline */
    .process-step {
        gap: var(--spacing-md);
        margin-bottom: 2rem;
    }

    .process-step:not(:last-child)::after {
        left: 27px;
        top: 65px;
        bottom: -40px;
    }

    .process-number {
        height: 55px;
        width: 55px;
        font-size: 1.25rem;
    }

    .process-content h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .process-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .process-duration {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    /* Tech Stack */
    .tech-stack {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }

    .tech-item {
        min-height: 80px;
        padding: 1rem;
    }

    .tech-name {
        font-size: 0.9rem;
    }

    /* Case Study Featured */
    .case-study-featured {
        grid-template-columns: 1fr;
    }

    .case-image-column {
        min-height: 200px;
    }

    .case-content-column {
        padding: 1.5rem;
    }

    .case-logo-large {
        font-size: 1.5rem;
    }

    .case-industry-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
        margin-bottom: 1rem;
    }

    .case-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
        font-size: 0.9rem;
    }

    /* Case Results Header */
    .case-results-header {
        margin-top: 1rem;
    }

    .case-results-header .result-item {
        padding: 8px 12px;
    }

    .case-results-header .result-value {
        font-size: 1.4rem;
    }

    .case-results-header .result-label {
        font-size: 0.65rem;
    }

    .case-results-header .result-icon-small {
        height: 16px;
        width: 16px;
    }

}


/* === pages/portfolio.css === */
/**
 * Portfolio Detail Page Styles
 * COMPLETELY REWRITTEN from old CSS lines 4362-4816
 * Extracted: 2025-11-14 - Ultra Audit Fix
 */

.portfolio-detail {
    background: var(--dark);
    color: var(--text-light);
}

/* Breadcrumb - REMOVED (using schema-only breadcrumbs for SEO without visual clutter) */

/* Portfolio Hero */

/* ===== PORTFOLIO DETAIL PAGE ===== */

.portfolio-hero {
    background: var(--gradient-hero);
    overflow: hidden;
    padding: clamp(6rem, 15vh, 10rem) var(--container-padding-x) clamp(4rem, 10vh, 6rem);
    position: relative;
}

/* Hero Image with Overlay */
.portfolio-hero-image {
    inset: 0;
    position: absolute;
    z-index: 1;
}

.portfolio-hero-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.portfolio-hero-overlay {
    background: linear-gradient(135deg, rgb(10 10 10 / 85%) 0%, rgb(26 26 26 / 75%) 100%);
    inset: 0;
    position: absolute;
    z-index: 2;
}

.portfolio-hero .container {
    position: relative;
    z-index: 3;
}

.portfolio-hero-content {
    /* .container already has padding and max-width, no need to duplicate */
}

/* Client Logo Badge */
.client-logo,
.portfolio-client-badge {
    background: rgb(155 179 156 / 10%);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    color: var(--green);
    display: inline-block;
    font-family: var(--font-mono-short);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0;
    margin-bottom: 2rem;
    padding: 8px 16px;
    text-transform: uppercase;
}

.portfolio-hero h1 {
    color: var(--white);
    font-family: var(--font-sans);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.portfolio-subtitle {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    opacity: 0.85;
}

/* Quick Facts Grid */
.portfolio-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: 60px;
}

/* Fact cards use base .card with modifiers */
.portfolio-facts .card {
    flex: 0 1 calc(25% - var(--spacing-md));
    max-width: 280px;
    min-width: 200px;
    padding: 16px 20px;
}

/* Compact modifier for cards with long text (automatically applied) */
.portfolio-facts .card--compact {
    flex-basis: 320px;
    max-width: 320px;
}

.fact-content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.fact-value-wrapper {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.fact-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    height: var(--icon-sm);
    width: var(--icon-sm);
}

/* Portfolio Fact Icons - SVG */
.fact-icon.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.fact-icon.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

.fact-icon.icon-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.fact-icon.icon-building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.fact-icon.icon-apps {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
}

.fact-value {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.fact-label {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

/* Portfolio Sections */
.portfolio-section {
    background: var(--dark);
    padding: var(--section-padding);
}

.portfolio-section-challenge {
    background: var(--dark);
}

.portfolio-section-solution {
    background: var(--dark-lighter);
}

.portfolio-section-results {
    background: var(--dark);
}

/* section-title a section-subtitle používají sdílené styly z base/typography.css */

/* Section Header (číslování sekce) */
.section-header {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: 4rem;
}

.section-number {
    align-items: center;
    background: var(--green-10);
    border: 2px solid var(--green);
    border-radius: var(--radius-circle);
    color: var(--green);
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-mono-short);
    font-size: 1.5rem;
    font-weight: 900;
    height: 70px;
    justify-content: center;
    width: 70px;
}

/* Override base section-title styles for portfolio layout */
.section-header .section-title {
    margin-bottom: 0.5rem;
    text-align: left;
}

.section-header .section-title::before {
    content: ''; /* Remove // prefix for this layout */
}

.section-intro {
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 0;
    margin-top: 1rem;
    opacity: 0.85;
}

/* Challenge Grid */
.challenge-grid {
    /* Uses .grid-2 and .gap-xl utility classes */
}

/* Challenge items use base .card with modifiers */
.challenge-grid .card:hover {
    box-shadow: 0 10px 40px rgb(255 107 107 / 20%);
    transform: translateX(5px);
}

.challenge-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--icon-md);
    margin-bottom: 1rem;
    width: var(--icon-md);
}

.challenge-icon.icon-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff6b6b' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.challenge-grid h3 {
    color: var(--text-light);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.challenge-grid p {
    color: var(--text-light);
    line-height: 1.7;
    opacity: 0.8;
}

/* Solution Grid */
.solution-grid-portfolio {
    /* Uses .grid-2 and .gap-xl utility classes */
}

.solution-item-portfolio {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    padding: 3rem;
    position: relative;
    transition: all 0.3s ease;
}

.solution-item-portfolio:hover {
    border-color: var(--green);
    box-shadow: 0 15px 50px var(--green-20);
    transform: translateY(-5px);
}

.solution-item-portfolio::before {
    color: var(--green);
    content: var(--item-number, '');
    font-family: var(--font-mono-short);
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.15;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
}

.solution-item-portfolio h3 {
    color: var(--green-neon);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.solution-item-portfolio p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 0;
    opacity: 0.85;
}

/* Portfolio Tech Tags */
.portfolio-tech {
    display: block; /* Override flex from home.css */
    margin-top: 5rem;
}

.tech-section-title {
    color: var(--green);
    display: block;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left;
    width: 100%;
}

.tech-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.tech-tag {
    background: var(--green-10);
    border: 1px solid var(--green);
    border-radius: var(--radius-medium);
    color: var(--green);
    flex: 0 0 auto;
    font-family: var(--font-mono-short);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: var(--green);
    box-shadow: 0 10px 30px var(--green-30);
    color: var(--dark);
    transform: translateY(-3px);
}

.tech-stack {
    margin-top: 3rem;
}

.tech-stack h3 {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Results Grid */
.results-grid {
    margin: 0 auto;

    /* Uses .grid-auto-250 and .gap-xl utility classes */
    max-width: var(--container-xl);
}

/* Result cards use base .card with modifiers */
/* Compact result cards - half height */
.results-grid .card--padding-large {
    padding: 1.5rem;
}

.result-icon {
    color: var(--green);
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.result-text {
    color: var(--text-light);
    line-height: 1.5;
    opacity: 0.8;
}

/* Portfolio Impact */
.portfolio-impact {
    align-items: flex-start;
    background: linear-gradient(135deg, var(--dark-card) 0%, var(--dark-lighter) 100%);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-medium);
    display: flex;
    gap: var(--spacing-xl);
    margin-top: 4rem;
    padding: 3rem;
}

.impact-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    height: 60px;
    width: 60px;
}

.impact-icon.icon-lightbulb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/%3E%3C/svg%3E");
}

.portfolio-impact h3 {
    color: var(--green-neon);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.portfolio-impact p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.85;
}

/* Testimonial */
.portfolio-testimonial {
    background: var(--dark-lighter);
    padding: var(--section-padding);
    text-align: center;
}

.testimonial-content {
    margin: 0 auto;
    max-width: var(--container-md);
}

.testimonial-quote {
    color: var(--green);
    display: block;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.testimonial-text {
    color: var(--text-light);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.testimonial-author {
    color: var(--text-light);
    opacity: 0.7;
}

/* Portfolio CTA */
.portfolio-cta {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    color: var(--white);
    padding: var(--section-padding-lg);
    text-align: center;
}

/* ===== RELATED SERVICES & PROJECTS (portfolio detail) ===== */

.portfolio-section-services {
    background: var(--dark-lighter);
}

.portfolio-services-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fill, minmax(300px, 420px));
}

.portfolio-section-related {
    background: var(--dark);
}

.related-projects-grid {
    margin-top: 2rem;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {
    /* Hero Section - Mobile */
    .portfolio-hero {
        padding: clamp(6rem, 15vh, 8rem) var(--container-padding-x) 3rem;
    }

    .portfolio-hero h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .portfolio-subtitle {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .client-logo,
    .portfolio-client-badge {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
        margin-bottom: 1.5rem;
        padding: 6px 12px;
    }

    /* Quick Facts - Stack Vertically */
    .portfolio-facts {
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xl);
    }

    .portfolio-facts .card {
        flex: 1 1 100%;
        min-width: auto;
        padding: 14px 18px;
    }

    .fact-value {
        font-size: 2rem;
    }

    .fact-label {
        font-size: 0.7rem;
    }

    .fact-icon {
        height: 24px;
        width: 24px;
    }

    /* Portfolio Sections - Reduce Padding */
    .portfolio-section {
        padding: 3rem var(--container-padding-x);
    }

    /* Section Header - Stack Vertically */
    .section-header {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-bottom: 2.5rem;
    }

    .section-number {
        font-size: 1.2rem;
        height: 55px;
        width: 55px;
    }

    .section-header .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .section-intro {
        font-size: 1rem;
        line-height: 1.7;
        margin-top: 0.5rem;
    }

    /* Challenge Grid - Single Column */
    .challenge-grid {
        grid-template-columns: 1fr !important;
    }

    .challenge-icon {
        height: 32px;
        margin-bottom: 0.75rem;
        width: 32px;
    }

    .challenge-grid h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .challenge-grid p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Solution Grid - Single Column */
    .solution-grid-portfolio {
        grid-template-columns: 1fr !important;
    }

    .solution-item-portfolio {
        padding: 2rem 1.5rem;
    }

    .solution-item-portfolio::before {
        font-size: 3rem;
        right: 1rem;
        top: 1rem;
    }

    .solution-item-portfolio h3 {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .solution-item-portfolio p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Tech Tags - Mobile Friendly */
    .portfolio-tech {
        margin-top: 3rem;
    }

    .tech-section-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

    .tech-tags {
        gap: var(--spacing-sm);
    }

    .tech-tag {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .tech-stack {
        margin-top: 2rem;
    }

    .tech-stack h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    /* Results Grid - Auto Responsive */
    .results-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    .results-grid .card--padding-large {
        padding: 1.25rem;
    }

    .result-icon {
        font-size: 1.3rem;
        margin-bottom: 0.4rem;
    }

    .result-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Portfolio Impact - Stack Vertically */
    .portfolio-impact {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-top: 3rem;
        padding: 2rem 1.5rem;
    }

    .impact-icon {
        height: 48px;
        width: 48px;
    }

    .portfolio-impact h3 {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .portfolio-impact p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Testimonial - Mobile */
    .portfolio-testimonial {
        padding: 3rem var(--container-padding-x);
    }

    .testimonial-quote {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .testimonial-text {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    .testimonial-author {
        font-size: 0.9rem;
    }

    /* Portfolio CTA - Mobile */
    .portfolio-cta {
        padding: 3rem var(--container-padding-x);
    }

    .portfolio-cta h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .portfolio-cta p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
}


/* === pages/contact.css === */
/**
 * Contact Page Styles
 * Contact-specific overrides and components
 * Hero styles jsou v components/hero.css
 */

/* ===== CONTACT HERO OVERRIDES (pokud potřeba) ===== */

/* .contact-hero může přepsat base .hero zde, pokud potřeba */

/* ===== CONTACT FORM SECTION ===== */

.contact-form-section {
    /* Uses .section.section-darker for background and padding */
}

/* h2 and subtitle use base .section-title and .section-subtitle */

.contact-form {
    background: var(--dark-lighter);
    border: 1px solid var(--green-10);
    border-radius: var(--radius-medium);
    padding: var(--spacing-3xl);
}

/* Scoped overrides for contact page form (prevent collision with forms.css component) */
.contact-form .form-row {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr 1fr;
    margin-bottom: 25px;
}

.contact-form .form-group {
    margin-bottom: 25px;
}

.contact-form .form-group label {
    color: var(--white);
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.contact-form .form-group label::before {
    content: none;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    background: var(--dark);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    color: var(--white);
    font-family: inherit;
    font-size: 1rem;
    padding: 15px 20px;
    transition: all 0.3s ease;
    width: 100%;
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-10);
}

/* Enhanced focus for keyboard navigation */
.contact-form .form-group input:focus-visible,
.contact-form .form-group textarea:focus-visible {
    box-shadow: 0 0 0 3px var(--green-20);
}

.contact-form .form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form .form-checkbox {
    margin: 30px 0;
}

.contact-form .checkbox-label {
    align-items: flex-start;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
}

.contact-form .checkbox-label input[type="checkbox"] {
    cursor: pointer;
    margin-right: 10px;
    margin-top: 2px;
    width: auto;
}

.contact-form .checkbox-label a {
    color: var(--green);
    text-decoration: none;
}

.contact-form .checkbox-label a:hover {
    text-decoration: underline;
}

.contact-form .form-message {
    border-radius: var(--radius-small);
    font-size: 0.95rem;
    margin-top: 20px;
    padding: 15px 20px;
}

.contact-form .form-message.success {
    background: var(--green-10);
    border: 1px solid var(--green);
    color: var(--green);
}

.contact-form .form-message.error {
    background: rgb(220 38 38 / 10%);
    border: 1px solid var(--red);
    color: var(--red);
}

/* ===== CONTACT INFO SECTION ===== */

.contact-info-section {
    /* Uses .section.section-dark for background and padding */
}

/* h2 and subtitle use base .section-title and .section-subtitle */

.contact-info-grid {
    margin: 0 auto;
    max-width: var(--container-xl);

    /* Uses .grid-auto-320 and .gap-xl utility classes */
}

/* Contact method cards use base .card.card--dark */
.contact-method-card {
    padding: 2.5rem;
    text-align: center;
}

.contact-method-card:hover {
    box-shadow: 0 10px 30px var(--green-10);
}

.method-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--icon-xl);
    margin: 0 auto 25px;
    opacity: 0.9;
    width: var(--icon-xl);
}

.method-icon.icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.method-icon.icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.method-icon.icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}

.method-title {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.method-value {
    color: var(--green);
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.method-value:hover {
    color: var(--green-neon);
    text-decoration: underline;
}

.method-description {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.8;
}

/* ===== EXPECT SECTION ===== */

.expect-section {
    /* Uses .section.section-dark for background and padding */
}

/* h2 uses base .section-title */

.expect-grid {
    margin: 0 auto;
    max-width: var(--container-xl);

    /* Uses .grid-auto-300 and .gap-xl utility classes */
}

.section-title + .expect-grid {
    margin-top: 4rem;
}

/* Expect cards use base .card with modifiers */
.expect-grid .card {
    padding: 2.5rem;
}

.expect-grid .card:hover {
    box-shadow: 0 10px 30px var(--green-10);
}

.expect-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--icon-xl);
    margin-bottom: 25px;
    opacity: 0.9;
    width: var(--icon-xl);
}

.expect-icon.icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.expect-icon.icon-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
}

.expect-icon.icon-document {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

.expect-grid h3 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.expect-grid p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {

    /* Contact Form */
    .contact-form {
        padding: 2rem var(--container-padding-x);
    }

    .contact-form .form-row {
        grid-template-columns: 1fr !important;  /* Stack inputs vertically */
        gap: 0;
        margin-bottom: 0;
    }

    .contact-form .form-group {
        margin-bottom: 20px;
    }

    .contact-form .form-group label {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .contact-form .form-group input,
    .contact-form .form-group textarea {
        font-size: 0.95rem;
        padding: 12px 16px;
    }

    .contact-form .form-group textarea {
        min-height: 120px;
    }

    .contact-form .form-checkbox {
        margin: 25px 0;
    }

    .contact-form .checkbox-label {
        font-size: 0.9rem;
    }

    .contact-form .btn {
        width: 100%;
        justify-content: center;
    }

    /* Contact Info Grid */
    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .contact-method-card {
        padding: 2rem 1.5rem;
    }

    .method-icon {
        height: 50px;
        width: 50px;
        margin-bottom: 20px;
    }

    .method-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .method-value {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .method-description {
        font-size: 0.95rem;
    }

    /* Expect Section */
    .section-title + .expect-grid {
        margin-top: 2rem;  /* Reduce from 4rem */
    }

    .expect-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .expect-grid .card {
        padding: 2rem 1.5rem;
    }

    .expect-icon {
        height: 50px;
        width: 50px;
        margin-bottom: 20px;
    }

    .expect-grid h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .expect-grid p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

}

/* === pages/privacy.css === */
.privacy-policy {
    background: var(--dark);
    margin: 0 auto;
    max-width: var(--container-xl);

    /* Extra top padding to create space below fixed header */
    padding: 8rem var(--container-padding-x) 2.5rem;
}

.privacy-header {
    margin-bottom: 60px;
    text-align: left;
}

.privacy-header h1 {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.privacy-header .last-updated {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.privacy-content {
    /* Single column layout - sidebar removed per user request */
}

/* Main Content */
.privacy-main {
    color: var(--text-light);
}

.privacy-section {
    margin-bottom: 4rem;
}

.privacy-section h2 {
    color: var(--green);
    font-family: var(--font-sans);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.privacy-section h3 {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    margin: 2rem 0 1rem;
}

.privacy-section h4 {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    margin: 1.5rem 0 0.8rem;
}

.privacy-section p {
    color: var(--text-light);
    font-family: var(--font-sans);
    line-height: 1.8;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.privacy-section ul {
    list-style: none;
    margin: 1rem 0;
    padding-left: 0;
}

.privacy-section li {
    color: var(--text-light);
    margin-bottom: 0.8rem;
    opacity: 0.85;
    padding-left: 1.5rem;
    position: relative;
}

.privacy-section li::before {
    color: var(--green);
    content: '→';
    left: 0;
    position: absolute;
}

.controller-info {
    background: var(--dark-lighter);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-small);
    margin: 1.5rem 0;
    padding: 1.5rem;
}

.controller-info p {
    margin: 0.5rem 0;
}

/* Purpose items grid - 2 columns on desktop */
.purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Always 2 columns on desktop */
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;  /* Consistent spacing below grid */
}

.purpose-item {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    padding: 1.5rem;
    margin: 0;  /* Remove margin, gap handles spacing */
}

.purpose-item h3 {
    color: var(--green-neon);
    margin-top: 0;
}

.legal-basis {
    background: var(--green-10);
    border-left: 3px solid var(--green);
    color: var(--green);
    font-family: var(--font-mono-short);
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
}

/* ===== COOKIE SETTINGS & PRIVACY PAGE - extracted from old CSS lines 3420-3566 ===== */

.cookies-category {
    margin: 30px 0;
}

.cookies-table {
    border-collapse: collapse;
    margin: 15px 0;
    width: 100%;
}

.cookies-table th,
.cookies-table td {
    border: 1px solid var(--green-20);
    padding: 12px;
    text-align: left;
}

.cookies-table th {
    background: var(--dark-lighter);
    color: var(--green);
    font-family: var(--font-mono);
    font-weight: 600;
}

.cookies-table td {
    color: var(--text-light);
    font-family: var(--font-sans);
    opacity: 0.8;
}

.cookie-settings-btn {
    background: var(--green);
    border: 2px solid var(--green);
    border-radius: var(--radius-small);
    color: var(--dark);
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 20px 0;
    padding: 12px 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.cookie-settings-btn:hover {
    background: transparent;
    box-shadow: 0 0 20px var(--green-40);
    color: var(--green);
}

.retention-table {
    border-collapse: collapse;
    margin: 20px 0;
    width: 100%;
}

.retention-table th,
.retention-table td {
    border: 1px solid var(--green-20);
    padding: 12px;
    text-align: left;
}

.retention-table th {
    background: var(--dark-lighter);
    color: var(--green);
    font-family: var(--font-mono);
    font-weight: 600;
}

.retention-table td {
    color: var(--text-light);
    font-family: var(--font-sans);
    opacity: 0.8;
}

.rights-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 30px 0;
}

.right-item {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-small);
    padding: 20px;
    transition: all 0.3s ease;
}

.right-item:hover {
    border-color: var(--green);
    box-shadow: 0 5px 20px var(--green-20);
}

.right-item .icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 48px;
    margin-bottom: 15px;
    width: 48px;
}

/* Rights Icons - SVG Vector Graphics */
.right-item .icon-access {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.right-item .icon-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.right-item .icon-delete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

.right-item .icon-pause {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z'/%3E%3C/svg%3E");
}

.right-item .icon-transfer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.right-item .icon-block {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");
}

.right-item .icon-legal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.right-item h3 {
    color: var(--green);
    font-family: var(--font-mono);
    margin-bottom: 8px;
}

.right-item p {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
}

.security-list {
    list-style: none;
    padding: 0;
}

.security-list li {
    padding: 10px 0 10px 35px;
    position: relative;
}

.security-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb39c' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 20px;
    left: 0;
    position: absolute;
    top: 12px;
    width: 20px;
}

.contact-box {
    background: var(--dark-lighter);
    border: 1px solid var(--green-20);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-small);
    margin: 30px 0;
    padding: 30px;
}

.contact-box p {
    color: var(--text-light);
    margin: 10px 0;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {

    /* Main Container */
    .privacy-policy {
        padding: 6rem var(--container-padding-x) 2rem;
    }

    /* Privacy Header */
    .privacy-header {
        margin-bottom: var(--spacing-xl);
    }

    .privacy-header .last-updated {
        font-size: 0.85rem;
    }

    /* Privacy Sections */
    .privacy-section {
        margin-bottom: 3rem;
    }

    /* Typography Adjustments */
    .privacy-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .privacy-section h3 {
        font-size: 1.15rem;
        margin: 1.5rem 0 0.8rem;
    }

    .privacy-section h4 {
        font-size: 1rem;
        margin: 1.25rem 0 0.7rem;
    }

    .privacy-section p {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 0.9rem;
    }

    .privacy-section li {
        font-size: 0.95rem;
        margin-bottom: 0.7rem;
        padding-left: 1.25rem;
    }

    /* Info Boxes */
    .controller-info {
        padding: 1.25rem;
        margin: 1.25rem 0;
    }

    .controller-info p {
        font-size: 0.9rem;
        margin: 0.4rem 0;
    }

    .purpose-item {
        padding: 1.25rem;
        margin: 1.25rem 0;
    }

    .purpose-item h3 {
        font-size: 0.95rem;
    }

    .legal-basis {
        font-size: 0.85rem;
        padding: 0.7rem 0.9rem;
        margin-top: 0.9rem;
    }

    /* Tables */
    .cookies-table,
    .retention-table {
        margin: 12px 0;
        font-size: 0.8rem;
    }

    .cookies-table th,
    .cookies-table td,
    .retention-table th,
    .retention-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .cookies-table th,
    .retention-table th {
        font-size: 0.75rem;
        font-weight: 600;
    }

    .cookies-table code,
    .retention-table code {
        font-size: 0.75rem;
        word-break: break-all;
    }

    .cookies-table th[data-short],
    .retention-table th[data-short] {
        font-size: 0;
        min-width: 90px;
    }

    .cookies-table th[data-short]::after,
    .retention-table th[data-short]::after {
        content: attr(data-short);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .cookies-table td:nth-child(3),
    .cookies-table td:nth-child(4),
    .retention-table td:nth-child(2) {
        min-width: 90px;
    }

    /* Cookie Settings Button */
    .cookie-settings-btn {
        font-size: 0.9rem;
        padding: 10px 20px;
        margin: 15px 0;
        width: 100%;
        text-align: center;
    }

    /* Rights Grid */
    .rights-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        margin: 20px 0;
    }

    .right-item {
        padding: 1.25rem;
    }

    .right-item .icon {
        height: 40px;
        width: 40px;
        margin-bottom: 12px;
    }

    .right-item h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .right-item p {
        font-size: 0.9rem;
    }

    /* Security List */
    .security-list li {
        padding: 8px 0 8px 30px;
        font-size: 0.95rem;
    }

    .security-list li::before {
        height: 18px;
        width: 18px;
        top: 10px;
    }

    /* Contact Box */
    .contact-box {
        padding: 1.5rem;
        margin: 20px 0;
    }

    .contact-box p {
        font-size: 0.95rem;
        margin: 8px 0;
    }

    /* Purpose grid - 1 column on mobile */
    .purpose-grid {
        grid-template-columns: 1fr !important;
    }

}


/* === pages/404.css === */
.error-404 {
    align-items: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.error-404::before {
    background:
        radial-gradient(circle at 20% 30%, var(--green-10) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--green-05) 0%, transparent 50%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

/* Animated grid background */
.error-grid {
    animation: gridMove 20s linear infinite;
    background-image:
        linear-gradient(var(--green-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--green-05) 1px, transparent 1px);
    background-size: 50px 50px;
    inset: 0;
    opacity: 0.3;
    position: absolute;
}

.error-container {
    max-width: var(--container-sm);
    padding: 120px 20px 40px;  /* Increase top padding for fixed header */
    position: relative;
    text-align: center;
    z-index: var(--z-base);
}

.error-code {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 180px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
    position: relative;
    text-shadow: 0 0 40px var(--green-50);
}


.error-title {
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.error-message {
    color: var(--text-muted-light);
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.error-terminal {
    background: rgb(0 0 0 / 50%);
    border: 1px solid var(--green-30);
    border-radius: var(--radius-small);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 40px 0;
    padding: 20px 30px;
    text-align: left;
}

.terminal-line {
    color: var(--text-muted-light);
    margin: 10px 0;
}

.terminal-prompt {
    color: var(--green);
    margin-right: 10px;
}

.terminal-error {
    color: var(--red-light);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
}

.error-link {
    align-items: center;
    background: var(--green);
    border-radius: var(--radius-small);
    color: var(--dark);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    gap: var(--spacing-sm);
    padding: 15px 35px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.error-link:hover {
    background: var(--green-neon);
    box-shadow: 0 10px 30px var(--green-40);
    transform: translateY(-2px);
}

.error-link-secondary {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--green);
}

.error-link-secondary:hover {
    background: var(--green-10);
    border-color: var(--green-neon);
}

.error-suggestions {
    border-top: 1px solid var(--green-20);
    margin-top: 60px;
    padding-top: 40px;
}

.error-suggestions h3 {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.error-suggestions h3::before {
    color: var(--green-neon);
    content: '> ';
}

.suggestions-list {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 20px;
}

.suggestion-item {
    background: var(--green-05);
    border: 1px solid var(--green-20);
    border-radius: var(--radius-small);
    padding: 15px;
    transition: all 0.3s ease;
}

.suggestion-item:hover {
    background: var(--green-10);
    border-color: var(--green);
}

.suggestion-item a {
    color: var(--text-light);
    display: block;
    text-decoration: none;
}

.suggestion-item a:hover {
    color: var(--green);
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {

    /* Mobile padding same as desktop */

    /* Giant 404 code - reduce significantly on mobile */
    .error-code {
        font-size: 100px;  /* Reduce from 180px */
    }

    .error-title {
        font-size: 1.8rem;  /* Reduce from 2.5rem */
        margin-bottom: 15px;
    }

    .error-message {
        font-size: 1rem;  /* Reduce from 1.2rem */
        line-height: 1.7;
        margin-bottom: 30px;
    }

    /* Terminal - reduce padding and handle overflow */
    .error-terminal {
        font-size: 0.8rem;  /* Reduce from 0.9rem */
        margin: 30px 0;
        padding: 15px 20px;
        overflow-x: auto;  /* Handle long URLs */
    }

    .terminal-line {
        margin: 8px 0;
        word-break: break-all;  /* Break long URLs */
    }

    .terminal-prompt {
        margin-right: 8px;
    }

    /* Action buttons - stack vertically */
    .error-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .error-link {
        font-size: 0.95rem;
        padding: 12px 28px;
        width: 100%;
        justify-content: center;
    }

    /* Suggestions section */
    .error-suggestions {
        margin-top: 50px;
        padding-top: 30px;
    }

    .error-suggestions h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .suggestions-list {
        grid-template-columns: 1fr !important;  /* Force 1 column on mobile */
        gap: var(--spacing-sm);
    }

    .suggestion-item {
        padding: 12px;
    }

    .suggestion-item a {
        font-size: 0.95rem;
    }

}


/* === utilities/spacing.css === */
/**
 * Spacing Utility Classes
 * Margin and padding utilities based on spacing scale
 * Uses spacing variables from base/variables.css
 */

/* ===== MARGIN UTILITIES ===== */

/* Margin All Sides */
.m-0 {
    margin: 0;
}

.m-xs {
    margin: var(--spacing-xs); /* 0.5rem / 8px */
}

.m-sm {
    margin: var(--spacing-sm); /* 1rem / 16px */
}

.m-md {
    margin: var(--spacing-md); /* 1.5rem / 24px */
}

.m-lg {
    margin: var(--spacing-lg); /* 2rem / 32px */
}

.m-xl {
    margin: var(--spacing-xl); /* 2.5rem / 40px */
}

.m-2xl {
    margin: var(--spacing-2xl); /* 3rem / 48px */
}

.m-3xl {
    margin: var(--spacing-4xl); /* 5rem / 80px */
}

.m-auto {
    margin: auto;
}

/* Margin Top */
.mt-0 {
    margin-top: 0;
}

.mt-xs {
    margin-top: var(--spacing-xs);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mt-2xl {
    margin-top: var(--spacing-2xl);
}

.mt-3xl {
    margin-top: var(--spacing-4xl);
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-xs {
    margin-bottom: var(--spacing-xs);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mb-2xl {
    margin-bottom: var(--spacing-2xl);
}

.mb-3xl {
    margin-bottom: var(--spacing-4xl);
}

/* Margin Left */
.ml-0 {
    margin-left: 0;
}

.ml-xs {
    margin-left: var(--spacing-xs);
}

.ml-sm {
    margin-left: var(--spacing-sm);
}

.ml-md {
    margin-left: var(--spacing-md);
}

.ml-lg {
    margin-left: var(--spacing-lg);
}

.ml-xl {
    margin-left: var(--spacing-xl);
}

.ml-2xl {
    margin-left: var(--spacing-2xl);
}

.ml-3xl {
    margin-left: var(--spacing-4xl);
}

.ml-auto {
    margin-left: auto;
}

/* Margin Right */
.mr-0 {
    margin-right: 0;
}

.mr-xs {
    margin-right: var(--spacing-xs);
}

.mr-sm {
    margin-right: var(--spacing-sm);
}

.mr-md {
    margin-right: var(--spacing-md);
}

.mr-lg {
    margin-right: var(--spacing-lg);
}

.mr-xl {
    margin-right: var(--spacing-xl);
}

.mr-2xl {
    margin-right: var(--spacing-2xl);
}

.mr-3xl {
    margin-right: var(--spacing-4xl);
}

.mr-auto {
    margin-right: auto;
}

/* Margin Horizontal (left + right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-xs {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

.mx-sm {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}

.mx-md {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
}

.mx-lg {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

.mx-xl {
    margin-left: var(--spacing-xl);
    margin-right: var(--spacing-xl);
}

.mx-2xl {
    margin-left: var(--spacing-2xl);
    margin-right: var(--spacing-2xl);
}

.mx-3xl {
    margin-left: var(--spacing-4xl);
    margin-right: var(--spacing-4xl);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin Vertical (top + bottom) */
.my-0 {
    margin-bottom: 0;
    margin-top: 0;
}

.my-xs {
    margin-bottom: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.my-sm {
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.my-md {
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.my-lg {
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.my-xl {
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.my-2xl {
    margin-bottom: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.my-3xl {
    margin-bottom: var(--spacing-4xl);
    margin-top: var(--spacing-4xl);
}

/* ===== PADDING UTILITIES ===== */

/* Padding All Sides */
.p-0 {
    padding: 0;
}

.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.p-2xl {
    padding: var(--spacing-2xl);
}

.p-3xl {
    padding: var(--spacing-4xl);
}

/* Padding Top */
.pt-0 {
    padding-top: 0;
}

.pt-xs {
    padding-top: var(--spacing-xs);
}

.pt-sm {
    padding-top: var(--spacing-sm);
}

.pt-md {
    padding-top: var(--spacing-md);
}

.pt-lg {
    padding-top: var(--spacing-lg);
}

.pt-xl {
    padding-top: var(--spacing-xl);
}

.pt-2xl {
    padding-top: var(--spacing-2xl);
}

.pt-3xl {
    padding-top: var(--spacing-4xl);
}

/* Padding Bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-xs {
    padding-bottom: var(--spacing-xs);
}

.pb-sm {
    padding-bottom: var(--spacing-sm);
}

.pb-md {
    padding-bottom: var(--spacing-md);
}

.pb-lg {
    padding-bottom: var(--spacing-lg);
}

.pb-xl {
    padding-bottom: var(--spacing-xl);
}

.pb-2xl {
    padding-bottom: var(--spacing-2xl);
}

.pb-3xl {
    padding-bottom: var(--spacing-4xl);
}

/* Padding Left */
.pl-0 {
    padding-left: 0;
}

.pl-xs {
    padding-left: var(--spacing-xs);
}

.pl-sm {
    padding-left: var(--spacing-sm);
}

.pl-md {
    padding-left: var(--spacing-md);
}

.pl-lg {
    padding-left: var(--spacing-lg);
}

.pl-xl {
    padding-left: var(--spacing-xl);
}

.pl-2xl {
    padding-left: var(--spacing-2xl);
}

.pl-3xl {
    padding-left: var(--spacing-4xl);
}

/* Padding Right */
.pr-0 {
    padding-right: 0;
}

.pr-xs {
    padding-right: var(--spacing-xs);
}

.pr-sm {
    padding-right: var(--spacing-sm);
}

.pr-md {
    padding-right: var(--spacing-md);
}

.pr-lg {
    padding-right: var(--spacing-lg);
}

.pr-xl {
    padding-right: var(--spacing-xl);
}

.pr-2xl {
    padding-right: var(--spacing-2xl);
}

.pr-3xl {
    padding-right: var(--spacing-4xl);
}

/* Padding Horizontal (left + right) */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
}

.px-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.px-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.px-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

.px-2xl {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
}

.px-3xl {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
}

/* Padding Vertical (top + bottom) */
.py-0 {
    padding-bottom: 0;
    padding-top: 0;
}

.py-xs {
    padding-bottom: var(--spacing-xs);
    padding-top: var(--spacing-xs);
}

.py-sm {
    padding-bottom: var(--spacing-sm);
    padding-top: var(--spacing-sm);
}

.py-md {
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.py-lg {
    padding-bottom: var(--spacing-lg);
    padding-top: var(--spacing-lg);
}

.py-xl {
    padding-bottom: var(--spacing-xl);
    padding-top: var(--spacing-xl);
}

.py-2xl {
    padding-bottom: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
}

.py-3xl {
    padding-bottom: var(--spacing-4xl);
    padding-top: var(--spacing-4xl);
}

/* === utilities/text.css === */
/**
 * Text Utility Classes
 * Colors, sizes, weights, alignment, and text styles
 */

/* ===== TEXT COLORS ===== */

.text-white { color: var(--white); }

.text-green { color: var(--green); }

.text-green-neon { color: var(--green-neon); }

.text-light { color: var(--text-light); }

.text-muted { color: var(--text-muted); }

.text-muted-light { color: var(--text-muted-light); }

.text-muted-lighter { color: var(--text-muted-lighter); }

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

.text-orange { color: var(--orange); }

.text-red { color: var(--red); }

/* ===== TEXT SIZES ===== */

.text-xs { font-size: 0.75rem; }    /* 12px */
.text-sm { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */
.text-xl { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 1.875rem; }  /* 30px */
.text-4xl { font-size: 2.25rem; }   /* 36px */
.text-5xl { font-size: 3rem; }      /* 48px */
.text-6xl { font-size: 4rem; }      /* 64px */

/* ===== FONT WEIGHTS ===== */

.font-light { font-weight: 300; }

.font-normal { font-weight: 400; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold { font-weight: 700; }

.font-black { font-weight: 900; }

/* ===== TEXT ALIGNMENT ===== */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

/* ===== TEXT STYLES ===== */

.uppercase { text-transform: uppercase; }

.lowercase { text-transform: lowercase; }

.capitalize { text-transform: capitalize; }

.italic { font-style: italic; }

.not-italic { font-style: normal; }

.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

.no-underline { text-decoration: none; }

/* ===== LETTER SPACING ===== */

.tracking-tight { letter-spacing: -0.05em; }

.tracking-normal { letter-spacing: 0; }

.tracking-wide { letter-spacing: 0.025em; }

.tracking-wider { letter-spacing: 0.05em; }

.tracking-widest { letter-spacing: 0.1em; }

/* ===== LINE HEIGHT ===== */

.leading-tight { line-height: 1.25; }

.leading-normal { line-height: 1.5; }

.leading-relaxed { line-height: 1.75; }

.leading-loose { line-height: 2; }

/* ===== FONT FAMILIES ===== */

.font-sans { font-family: var(--font-sans); }

.font-mono { font-family: var(--font-mono); }

.font-mono-short { font-family: var(--font-mono-short); }

/* === utilities/effects.css === */
/**
 * Effects Utility Classes
 * Transitions, shadows, and hover effects
 */

/* ===== TRANSITIONS ===== */

.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
    transition: all 0.5s ease;
}

/* ===== BOX SHADOWS ===== */

.shadow-sm {
    box-shadow: 0 5px 20px var(--green-20);
}

.shadow-md {
    box-shadow: 0 10px 30px var(--green-20);
}

.shadow-lg {
    box-shadow: 0 15px 40px var(--green-20);
}

.shadow-xl {
    box-shadow: 0 15px 50px var(--green-20);
}

.shadow-green-glow {
    box-shadow: 0 0 30px var(--green-40);
}

.shadow-card {
    box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
}

/* ===== HOVER EFFECTS ===== */

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-lift-sm:hover {
    transform: translateY(-3px);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
}

.hover-shadow:hover {
    box-shadow: 0 10px 30px var(--green-20);
}

.hover-border-green:hover {
    border-color: var(--green);
}

/* ===== COMBINED HOVER EFFECTS ===== */

.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    border-color: var(--green);
    box-shadow: 0 15px 40px var(--green-20);
    transform: translateY(-5px);
}

/* ===== OPACITY UTILITIES ===== */

.opacity-0 { opacity: 0; }

.opacity-10 { opacity: 0.1; }

.opacity-20 { opacity: 0.2; }

.opacity-30 { opacity: 0.3; }

.opacity-40 { opacity: 0.4; }

.opacity-50 { opacity: 0.5; }

.opacity-60 { opacity: 0.6; }

.opacity-70 { opacity: 0.7; }

.opacity-80 { opacity: 0.8; }

.opacity-90 { opacity: 0.9; }

.opacity-100 { opacity: 1; }

.hover-opacity-100:hover {
    opacity: 1;
}

/* ===== SCROLL PROGRESS BAR ===== */

.scroll-progress {
    background: linear-gradient(90deg, var(--green) 0%, var(--green-neon) 100%);
    height: 3px;
    left: 0;
    position: fixed;
    top: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.1s ease-out;
    width: 100%;
    z-index: 9999;
}

/* ===== BACK TO TOP BUTTON ===== */

.back-to-top {
    align-items: center;
    background: var(--green);
    border: 1px solid var(--green-40);
    border-radius: 50%;
    bottom: 30px;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    opacity: 0;
    position: fixed;
    right: 30px;
    transform: translateY(20px);
    transition: all 0.3s ease;
    visibility: hidden;
    width: 50px;
    z-index: var(--z-sticky); /* Below mobile menu overlay (z-modal + 1 = 1001) */
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.back-to-top:hover {
    background: var(--green-neon);
    box-shadow: 0 5px 20px var(--green-40);
    transform: translateY(-5px);
}

.back-to-top:active {
    transform: translateY(-2px);
}

.back-to-top svg {
    display: block;
}

/* Hide back-to-top when mobile menu is open */
body:has(.mobile-menu-overlay.active) .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        height: 45px;
        right: 20px;
        width: 45px;
    }
}

/* === utilities/grid.css === */
/**
 * Grid Utility Classes
 * Reusable grid patterns for consistent layouts
 */

/* ===== FIXED COLUMN GRIDS ===== */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

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

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

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Mobile (do 640px): Vše 1 sloupec */
@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Tablet (641px - 1023px): 2 sloupce */
@media (min-width: 641px) and (max-width: 1023px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .grid-2 zůstává 2 sloupce */
}

/* Desktop (1024px+): Původní počet sloupců */

/* ===== RESPONSIVE AUTO-FIT GRIDS ===== */

.grid-auto-200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-320 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-auto-380 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

/* ===== GAP UTILITIES ===== */

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

.gap-2xl {
    gap: var(--spacing-2xl);
}

.gap-3xl {
    gap: var(--spacing-4xl);
}

/* === utilities/animations.css === */
/**
 * Animations & Keyframes
 * All @keyframes and animation definitions
 */

/* ===== KEYFRAME ANIMATIONS ===== */

@keyframes glitch {
    0%, 100% { transform: translate(0); }

    20% { transform: translate(-2px, 2px); }

    40% { transform: translate(-2px, -2px); }

    60% { transform: translate(2px, 2px); }

    80% { transform: translate(2px, -2px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 20px var(--green-40); }

    50% { box-shadow: 0 0 40px var(--green-80); }
}

@keyframes slideCode {
    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }
}

@keyframes blink {
    0%, 50% { opacity: 1; }

    51%, 100% { opacity: 0; }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== ANIMATION UTILITY CLASSES ===== */

.animate-fade-in {
    animation: fadeIn 0.5s ease-in forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-float {
    animation: float 20s ease-in-out infinite;
}

.animate-pulse-green {
    animation: pulse-green 4s ease-in-out infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }

    100% { transform: translate(50px, 50px); }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

/* ===== SCROLL REVEAL ===== */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delayed reveal for staggered animations */
.scroll-reveal-delay-1 {
    transition-delay: 0.1s;
}

.scroll-reveal-delay-2 {
    transition-delay: 0.2s;
}

.scroll-reveal-delay-3 {
    transition-delay: 0.3s;
}

.scroll-reveal-delay-4 {
    transition-delay: 0.4s;
}

/* === utilities/accessibility.css === */
/**
 * Accessibility Utilities
 * Focus-visible improvements for keyboard navigation
 */

/* ===== VISUALLY HIDDEN (Screen Reader Only) ===== */

/* Hides content visually but keeps it accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Allow element to be focusable while visually hidden (e.g. skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===== BASE FOCUS RESET ===== */

/* Remove default focus outline for interactive elements when using mouse */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ===== FOCUS-VISIBLE STYLES ===== */

/* Show focus outline ONLY for keyboard navigation */

/* Buttons */
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 3px;
}

.btn-primary:focus-visible {
    outline-color: var(--green-neon);
}

.btn-secondary:focus-visible {
    outline-color: var(--green);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Navigation links */
.nav-links a:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 4px;
}

/* Mobile menu toggle */
.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 4px;
}

/* Mobile nav links */
.mobile-nav-links a:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 4px;
}

/* Form inputs - keep existing box-shadow, add outline for extra visibility */
.form-control:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

/* Checkboxes */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Back to top button */
.back-to-top:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 4px;
}

/* Skip to main content link - already has focus, keep it */
.skip-to-main:focus {
    outline: 2px solid var(--green-neon);
    outline-offset: 2px;
}

/* Card links (interactive cards) */
.service-card:focus-visible,
.portfolio-card:focus-visible,
.case-study-link:focus-visible,
.related-service-card:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
}

/* Language switcher */
.lang-link:focus-visible,
.mobile-lang-link:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Logo */
.logo:focus-visible {
    outline: 2px solid var(--green-neon);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ===== HIGH CONTRAST MODE ===== */

/* Ensure focus is visible in high contrast mode */
@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

/* ===== REDUCED MOTION ===== */

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Make scroll reveal elements immediately visible */
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Disable floating animations */
    .animate-float,
    .animate-pulse-green,
    .hero-decoration > * {
        animation: none !important;
    }

    /* Disable hover lift effects - keep color changes only */
    .hover-lift:hover,
    .hover-lift-sm:hover,
    .hover-scale:hover,
    .hover-scale-sm:hover {
        transform: none !important;
    }

    /* Back to top button - instant visibility without animation */
    .back-to-top {
        transition: opacity 0.01ms, visibility 0.01ms !important;
    }

    .back-to-top:hover {
        transform: none !important;
    }

    /* Scroll progress bar - instant update */
    .scroll-progress {
        transition: none !important;
    }

    /* Mobile menu - instant open/close */
    .mobile-menu-overlay,
    .mobile-menu-toggle span {
        transition: none !important;
    }

    /* Cards - keep interactivity but remove motion */
    .card,
    .service-card,
    .portfolio-card,
    .value-card {
        transition: box-shadow 0.01ms, border-color 0.01ms !important;
    }

    /* Buttons - instant state changes */
    .btn {
        transition: background-color 0.01ms, color 0.01ms, border-color 0.01ms !important;
    }

    /* Code rain effect - disable completely */
    .code-rain,
    .code-line {
        animation: none !important;
        display: none !important;
    }
}

/* === utilities/responsive.css === */
/**
 * Responsive Utilities
 * Helper classes for responsive design and mobile/desktop visibility
 */

/* ===== MOBILE/DESKTOP VISIBILITY ===== */

/* Hide element on mobile devices (< 768px) */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Hide element on desktop devices (>= 768px) */
@media (min-width: 768px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Hide element on tablets and up (>= 992px) */
@media (min-width: 992px) {
    .hidden-tablet-up {
        display: none !important;
    }
}