@font-face {
    font-family: 'Helvetica-Neue';
    src: url('./helvetica-neue/HelveticaNeue-Light-08.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica-Neue';
    src: url('./helvetica-neue/HelveticaNeue-LightItalic-09.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica-Neue';
    src: url('./helvetica-neue/HelveticaNeue-Bold-02.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica-Neue';
    src: url('./helvetica-neue/HelveticaNeue-BoldItalic-04.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./poppins/Poppins-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./poppins/Poppins-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./poppins/Poppins-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./poppins/Poppins-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

/* --- CSS Proměnné pro Dark/Light mód --- */
:root {
    --bg-color: #ffffff;
    --element-color: #000000;
    --green-color: #29FD53;
    /* Carousel — výchozí hodnoty pro desktop */
    --carousel-item-w: 300px;
    --carousel-item-h: 450px;
    --carousel-gap: 50px;
}

[data-theme="dark"] {
    --bg-color: #111111;
    --element-color: #ffffff;
}

/* --- Reset odkazů --- */
a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

/* Potlačení výchozího modrého tap-highlightu na iOS/Android WebKitu.
   Nastaveno globálně (ne jen na .bottom-nav__item a), protože při plné
   navigaci mezi stránkami (site není SPA) se highlight z odkazu, na který
   se kliklo, může na zlomek sekundy "prosvítit" i do nově načtené stránky —
   projevuje se jako modré bliknutí spodního menu při přechodu mezi stránkami. */
html {
    -webkit-tap-highlight-color: transparent;
}
a, button {
    -webkit-tap-highlight-color: transparent;
}

img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Základní reset a barvy --- */
html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--element-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Hlavní kontejner menu (Liquid Glass Efekt) --- */
.top-menu {
    position: sticky;       /* Přichycení při scrollu */
    top: 20px;              /* Mezera od horního okraje obrazovky, když se menu přichytí */
    z-index: 1000;          /* Zajištění, že menu bude vždy navrchu nad ostatním obsahem stránky */
    max-width: 1100px;
    height: 60px;
    margin: 50px auto 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px 0 20px;
    box-sizing: border-box;
    
    /* Přechod pozadí adaptivní na dark/light mód podle Figmy (95% -> 75% -> 95%) */
    background: linear-gradient(90deg, 
        color-mix(in srgb, var(--bg-color) 75%, transparent) 0%, 
        color-mix(in srgb, var(--bg-color) 65%, transparent) 25%, 
        color-mix(in srgb, var(--bg-color) 55%, transparent) 50%, 
        color-mix(in srgb, var(--bg-color) 65%, transparent) 75%, 
        color-mix(in srgb, var(--bg-color) 75%, transparent) 100%
    );
    
    /* Rozmazání pozadí (Blur 10) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Zaoblení a rámeček */
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--element-color) 20%, transparent);
    
    /* Vnitřní stíny pro 3D skleněný efekt */
    box-shadow: 
        inset 0px 2px 4px rgba(255, 255, 255, 0.40),
        inset 0px -2px 4px rgba(0, 0, 0, 0.20);
        
    /* Zajištění plynulosti při přepnutí módu */
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* --- Logo namísto textu v menu --- */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.logo svg {
    /* DOPLŇ: Přesné rozměry z tvého screenshotu z Figmy */
    width: 35px;  
    height: 30px; 
    display: block;
    
    /* TIP: Pokud chceš, aby logo automaticky reagovalo na Dark/Light mód 
       stejně jako text, ujisti se, že prvky uvnitř SVG mají nastaveno fill="currentColor" 
       nebo stroke="currentColor". Tímto řádkem pak barvu předáš z CSS proměnné: */
    color: var(--element-color);
}

/* --- Skupina tlačítek napravo --- */
.right-group {
    position: static; /* Zrušení původního absolutního pozicování */
    display: flex;
    align-items: center;
    gap: 40px; /* Přesná mezera 40px z tvého rozpadu z Figmy */
}

/* --- Textové tlačítko "O mně" --- */
.text-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600; /* Změna na SemiBold */
    color: var(--element-color);
    margin: 0;
}

/* --- Společné styly pro tlačítka --- */
button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--element-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, opacity 0.2s ease;
}

/* --- Hover Efekty --- */
@media (hover: hover) {
    button:hover,
    .text-btn:hover {
        transform: scale(1.05);
        opacity: 0.8;
    }

    #theme-toggle:hover {
        transform: scale(1.1);
    }

    #contact-btn:hover {
    transform: scale(1.05);
    opacity: 0.8;
    }
}

/* --- Ikonová tlačítka --- */
.icon-btn svg {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease;
    fill: currentColor; 
}

/* --- Oddělovač --- */
.separator {
    width: 2px;
    height: 36px;
    background-color: var(--element-color);
    transition: background-color 0.3s ease;
}

/* --- Kontejner pro ikony (tlačítko) --- */
#theme-toggle {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--element-color);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Společný styl pro obě SVG --- */
#theme-toggle svg {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity 0.4s ease, transform 0.5s ease;
    overflow: visible;
}

/* --- Výchozí stav (Light Mode) --- */
.slunce-svg {
    opacity: 0;
    transform: rotate(90deg);
}

.mesic-svg {
    opacity: 1;
    transform: rotate(0deg);
}

/* --- Dark Mode stav --- */
[data-theme="dark"] .slunce-svg {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="dark"] .mesic-svg {
    opacity: 0;
    transform: rotate(-90deg);
}

#back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--element-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, opacity 0.2s ease;
}

#back-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}



/* =====================================================
   LOGO-ONLY HLAVIČKA — pouze pro index.html (O mně)
   Na desktopu skryta; na mobilu/tabletu zobrazí plné logo
   centrované vodorovně, s 40 px od horního okraje (Figma).
   ===================================================== */
.mobile-header-logo-only {
    display: none;          /* Skryta na desktopu */
    position: absolute;
    inset: 0;
    align-items: flex-start;
    justify-content: center;
}

.mobile-header-logo-only svg {
    color: var(--element-color);
    display: block;
    /* Šířka a padding-top se nastavují v každé breakpointové skupině */
}









/* =====================================================
   TVŮJ PŮVODNÍ KÓD O MNĚ (Beze změn)
   ===================================================== */
/* --- KONTEJNER STRÁNKY O MNĚ --- */
.about-container {
    width: 1120px;
    margin: 50px auto 60px auto;
    /* Zajištění, že footer bude přesně 60px pod obrázkem */
}

/* --- FLEX LAYOUT (Fotka + Text vedle sebe) --- */
.about-layout {
    display: flex;
    align-items: center; /* Vertikální zarovnání textů na střed vůči fotce */
}

/* --- FOTOGRAFIE (Přidána animace) --- */
.about-image-box {
    width: 400px;
    height: 600px;
    flex-shrink: 0; /* Zabrání prohlížeči fotku jakkoliv deformovat */
    
    /* Nové vlastnosti pro animaci */
    opacity: 0;
    animation: plynulyVstupFotky 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.about-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px; 
}

/* --- SKUPINA TEXTŮ (Přidán výchozí skrytý stav a animace) --- */
.about-text-group {
    margin-left: 45px; /* Přesná mezera mezi obrázkem a textem */
    width: 555px;      /* Šířka textového bloku z Figmy */
    display: flex;
    flex-direction: column;
    gap: 100px;        /* Přesná růžová mezera 100px mezi odstavci */
}

.mobile-break {
  display: none;
}

.tablet-break {
  display: none;
}

/* Stylování samotných odstavců */
.about-text-group p {
    margin: 0; 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--element-color); /* OPRAVA: změněno z var(--text-color), kterou v rootu nemáš nadefinovanou */
    
    /* Nové vlastnosti pro animaci */
    opacity: 0;
    animation: vyjezdZpozaFotky 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* --- POSTUPNÉ ZPOŽDĚNÍ (Stagger efekt) --- */
/* Fotka se objevuje od 0s do 1.2s. Texty začnou vyjíždět postupně za sebou. */
.about-text-group p:nth-child(1) { animation-delay: 0.4s; }
.about-text-group p:nth-child(2) { animation-delay: 0.7s; }
.about-text-group p:nth-child(3) { animation-delay: 1.0s; }
.about-text-group p:nth-child(4) { animation-delay: 1.3s; }

/* Animace pro fotku: jemné prolnutí a lehké zvětšení */
@keyframes plynulyVstupFotky {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animace pro text: posun zleva (zpoza fotky) doprava do původní pozice */
@keyframes vyjezdZpozaFotky {
    from {
        opacity: 0;
        transform: translateX(-40px); /* Odstartuje o 40px více vlevo směrem od fotky */
    }
    to {
        opacity: 1;
        transform: translateX(0);     /* Skončí na své původní pozici */
    }
}

/* Animace pro mobil/tablet: text přijíždí zprava (z oblasti za pravým okrajem)
 * aby nevyjel přes fotku vlevo. Overflow: hidden na .about-text-group ho ořízne. */
@keyframes vyjezdZprava {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- KONTAKTNÍ SEKCE (vertikální layout) --- */
.social-footer {
    position: relative;
    width: 100%;
    margin-top: 200px;
    padding: 0 40px 100px calc(50% - 450px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* --- Nadpis sekce --- */
.contact-title {
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    font-style: normal;
    color: var(--element-color);
    margin: 0 0 100px 0;
    line-height: 1.2;
}

.contact-title__dot {
    color: var(--green-color);
}

/* --- JEDNOTLIVÉ POLOŽKY (Ikona + Text) --- */
.social-item {
    display: flex;
    align-items: center;
    gap: 28px;
}

.social-item + .social-item {
    margin-top: 120px;
}

.social-item .icon-svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--element-color);
    transition: color 0.4s ease;
}

.social-item .text-btn {
    text-decoration: none;
    color: var(--element-color);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.social-item .text-btn:hover {
    opacity: 0.7;
}

/* Hover pro ikonový odkaz */
.social-item a:has(.icon-svg) {
    display: flex;
    color: var(--element-color);
    transition: opacity 0.3s ease;
}

.social-item a:has(.icon-svg):hover {
    opacity: 0.7;
}

/* --- CALLOUT — Nebo mě kontaktujte přímo skrze formulář --- */
.contact-callout {
    position: absolute;
    top: 270px;
    left: calc(50% + 100px);
    width: 370px;
    height: 186px;
    color: var(--element-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

/* =====================================================
   CONTACT CALLOUT — ANIMACE ODLETU LETADLA
   ===================================================== */
@keyframes planeFlyAway {
    0%   { transform: translate(0, 0);           opacity: 1; }
    100% { transform: translate(220px, -220px);  opacity: 0; }
}

.contact-callout__plane--flying {
    animation: planeFlyAway 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
}

@media (hover: hover) {
    .contact-callout__plane:hover {
        opacity: 0.75;
    }

    .contact-callout__text:hover {
        opacity: 0.75;
    }
}

.contact-callout__plane {
    position: absolute;
    top: 2px;
    right: 80px;
    color: var(--element-color);
}

.contact-callout__arrow {
    position: absolute;
    top: 66px;
    right: 44px;
    color: var(--element-color);
}

.contact-callout__text {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--element-color);
}

/* Na mobilu a tabletu callout skryjeme */
@media (max-width: 1399px) {
    .contact-callout {
        display: none;
    }
}



/* =====================================================
   SEKCE — CO FOTÍM NEJVÍCE
   ===================================================== */

.specialty-section {
    max-width: 1120px;
    margin: 150px auto 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.specialty-title {
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    font-style: normal;
    color: var(--element-color);
    margin: 0 0 60px 0;
    line-height: 1.2;
}

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(2, 360px);
    gap: 60px;
    justify-content: center;
}

.specialty-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: var(--element-color);
    border-radius: 14px;
    padding: 0 30px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .specialty-btn:hover {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

.specialty-btn__label {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--green-color);
}

.specialty-btn__icon {
    display: flex;
    align-items: center;
    color: var(--bg-color);
}

/* --- Responsivita --- */
@media (max-width: 1399px) {
    .specialty-section {
        max-width: 100%;
        padding: 0 clamp(20px, 5vw, 60px);
        /* align-items: center zůstává — nadpis zůstane centrovaný */
    }

    .specialty-grid {
        /* minmax řídí min/max šířku přímo na sloupcích —
           tlačítka vždy vyplní celou buňku, bez zarovnání doleva.
           Při širším viewportu se grid centruje přes justify-content. */
        grid-template-columns: repeat(2, minmax(280px, 480px));
        gap: clamp(20px, 4vw, 60px);
        width: 100%;
        align-self: stretch;
        justify-content: center;
    }

    .specialty-title {
        font-size: clamp(48px, 6vw, 64px); /* stejné hranice jako hero-intro, 6 vw pro tablet */
        margin-bottom: clamp(30px, 5vw, 60px);
    }
}

@media (max-width: 768px) {
    .specialty-section {
        margin-top: clamp(80px, 27.9vw, 120px);
        padding: 0 clamp(16px, 5vw, 40px);
    }

    /* Jedno-sloupcový layout — tlačítka pod sebou.
       Šířka skupiny tlačítek: 300 px / 430 px = 69,77 vw (iPhone 14 Pro Max).
       width (ne max-width) — rodič má align-items: center, jinak se smrskne na obsah. */
    .specialty-grid {
        grid-template-columns: 1fr;
        width: clamp(220px, 69.77vw, 300px);
        margin-left: auto;
        margin-right: auto;
        gap: clamp(20px, 6.98vw, 30px); /* 30 px při 430 px */
    }

    .specialty-title {
        font-size: clamp(24px, 9.5vw, 48px); /* stejný clamp jako hero-intro */
        margin-bottom: clamp(28px, 9.3vw, 40px); /* 40 px při 430 px */
    }

    /* Výška: 50 px / 430 px = 11,63 vw.
       Text a ikona zůstávají pevně velké — zmenšuje se jen vnitřní padding. */
    .specialty-btn {
        height: clamp(40px, 11.63vw, 50px);
        padding: 0 clamp(12px, 5vw, 22px);
        border-radius: clamp(8px, 2.5vw, 12px);
    }

    .specialty-btn__label {
        font-size: 18px;
    }

    .specialty-btn__icon svg {
        width: 30px;
        height: 30px;
    }
}

/* =====================================================
   SEKCE — RYCHLÁ UKÁZKA MÉ TVORBY + INFINITE CAROUSEL
   ===================================================== */

.portfolio-preview {
    margin-top: 150px;
}

/* Nadpis — zarovnán doleva uvnitř stejného max-width kontejneru */
.portfolio-preview__head {
    margin: 0 0 70px 0;
    padding-left: calc(50% - 450px);
    padding-right: 40px;
    box-sizing: border-box;
}

.portfolio-preview__title {
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: var(--element-color);
    margin: 0;
    line-height: 1.2;
}

/* ── Responzivita portfolio-preview ──────────────────────────────────────────
   Bloky musí být ZA základními styly — jinak je kaskáda přepíše. */

@media (max-width: 768px) {
    .portfolio-preview {
        margin-top: clamp(80px, 27.9vw, 120px);
    }

    /* Oprava paddingu hlavičky: calc(50%−450px) je na mobilu záporné → 0.
       Přidáme symetrický padding shodný se specialty-section. */
    .portfolio-preview__head {
        padding-left: clamp(16px, 5vw, 40px);
        padding-right: clamp(16px, 5vw, 40px);
    }

    /* Stejný clamp jako hero-intro a specialty-title */
    .portfolio-preview__title {
        font-size: clamp(24px, 9.5vw, 48px);
    }
}

@media (min-width: 769px) and (max-width: 1399px) {
    .portfolio-preview {
        margin-top: clamp(120px, 14vw, 150px);
    }

    /* Stejný clamp jako specialty-title na tabletu */
    .portfolio-preview__title {
        font-size: clamp(48px, 6vw, 64px);
    }
}

/* ── Carousel ─────────────────────────────────────────
   Technika: track obsahuje 5 originálů + 5 duplikátů.
   Každá položka je 300px + margin-right: 50px = 350px.
   Jeden set = 5 × 350px = 1750px → animujeme o -1750px,
   čímž se track "teleportuje" zpět na začátek bez trhaní.
   ────────────────────────────────────────────────────── */

.carousel {
    overflow: hidden;
    width: 100%;
}

.carousel__track {
    display: flex;
    width: max-content;
    animation: carousel-scroll 36s linear infinite;
}

/* Pauza při najetí myší
.carousel:hover .carousel__track {
    animation-play-state: paused;
}*/

@keyframes carousel-scroll {
    0%   { transform: translateX(0); }
    /* 5 originálů × (šířka karty + mezera) — automaticky se přepočítá při změně proměnných */
    100% { transform: translateX(calc(-10 * (var(--carousel-item-w) + var(--carousel-gap)))); }
}

.carousel__item {
    width: var(--carousel-item-w);
    height: var(--carousel-item-h);
    flex-shrink: 0;
    margin-right: var(--carousel-gap);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--placeholder-color, #2a2a2a);
}

/* Tmavý mód: placeholder trochu světlejší */
[data-theme="dark"] .carousel__item {
    background-color: #333;
}

.carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Tlačítko CELÉ PORTFOLIO ────────────────────────── */

.portfolio-preview__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 80px auto 0 auto;
    padding: 0 48px;
    height: 60px;
    background-color: var(--element-color);
    color: var(--green-color) !important;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    border-radius: 14px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .portfolio-preview__btn:hover {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

/* =====================================================
   COPYRIGHT SEKCE
   ===================================================== */
.copyright-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}

.copyright-line {
    width: 100%;
    max-width: 1000px;
    height: 1px;
    border: none;
    background-color: var(--element-color);
    opacity: 0.25; /* 25% průhlednost */
    margin: 0;
    margin-bottom: 50px;
}

.copyright-text {
    font-family: 'Helvetica-Neue', sans-serif;
    font-weight: 300; /* Font weight 300 odpovídá Light řezu */
    font-size: 16px;
    color: var(--element-color);
    opacity: 0.5; /* 50% průhlednost */
    text-align: center;
    line-height: 1.6; /* Výška řádku pro hezký odstup obou řádků od sebe */
    margin: 0;
}

/* =====================================================
   RESPONSIVITA — mobil (max. šířka 768 px)
   ===================================================== */
@media (max-width: 768px) {
    /* --- Hlavička — stránky S fixed top-menu (portfolio, kontakt) ---
       floating-pill menu se nahrazuje fullwidth fixed headerem.
       Stránky s .mobile-header-logo-only (index.html) toto přebíjí níže. */
    body {
        padding-top: clamp(90px, 30vw, 130px);
    }

    .top-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        height: clamp(90px, 30vw, 130px);
    }

    /* Skrýt původní logo a pravou skupinu tlačítek */
    .top-menu .logo,
    .top-menu .right-group {
        display: none;
    }

    /* --- Hlavní obsah — O mně (MOBIL) ---
     * Layout z Figmy (iPhone 14 Pro Max, 430 px):
     *   – Fotka 350×466 px (poměr 3:4), centrovaná horizontálně.
     *   – 34 px mezera nad fotkou (pod nadpisem) → 7,9 vw.
     *   – 40 px mezera pod fotkou, před texty → 9,3 vw.
     *   – Texty začínají u levého okraje fotky, gap 40 px → 9,3 vw.
     * Bleed efekt (záporný margin-left) je zrušen. */
    .about-container {
        width: 100%;
        margin: clamp(20px, 7.9vw, 34px) 0 clamp(30px, 8vw, 60px) 0;
        overflow-x: visible;
    }

    .about-layout {
        flex-direction: column;  /* Fotka nahoře, texty dole */
        align-items: center;     /* Oboje centrováno horizontálně */
    }

    /* Fotka: poměr 4:3 (širokoúhlá), šířka 350 px při 430 px → 81,4 vw.
     * Záporný margin-left z předchozí verze je odstraněn. */
    .about-image-box {
        width: clamp(240px, 81.4vw, 350px);
        height: auto;
        aspect-ratio: 4 / 3;
        margin-left: 0;
        flex-shrink: 0;
        /* Udržuje fotku na vlastním GPU compositor layer i po skončení CSS animace
           (plynulyVstupFotky, trvání 1,2 s). Bez toho může browser element
           "de-promotovat" a paint reflow z typing animace výše způsobí vizuální
           záškub — konkrétně na Safari/WebKit. */
        will-change: opacity, transform;
    }

    .about-photo {
        border-radius: clamp(14px, 4vw, 20px);
    }

    /* Textový blok: stejná šířka jako fotka → levý okraj se automaticky
     * zarovná s levým okrajem fotky (oboje centrováno přes align-items: center).
     * margin-top = 40 px při 430 px → 9,3 vw.
     * gap = 40 px mezi odstavci → 9,3 vw. */
    .about-text-group {
        width: clamp(240px, 81.4vw, 350px);
        margin-left: 0;
        margin-top: clamp(24px, 9.3vw, 40px);
        padding-right: 0;
        height: auto;
        flex: none;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(20px, 9.3vw, 40px);
        overflow: visible;
        contain: none;
    }

    .about-text-group p {
        font-size: clamp(10.8px, 3.3vw, 14.4px);
        animation-name: vyjezdZprava; /* Přijíždí zprava */
    }

    /* Mobilní zalomení řádků — zobrazit pouze na mobilu */
    .mobile-break {
        display: inline;
    }

    /* --- Kontaktní sekce --- */
    /* margin-top = mezera pod tlačítkem k "Pojďme tvořit": 120 px při 430 px → 27,9 vw */
    .social-footer {
        margin-top: clamp(80px, 27.9vw, 120px);
        /* padding-bottom: 50 px (Figma) pod calloutem → 11,63 vw */
        /* Levý padding sjednocen s .portfolio-preview__head (referenční nadpis) */
        padding: 0 clamp(20px, 6vw, 40px) clamp(30px, 11.63vw, 50px) clamp(16px, 5vw, 40px);
    }

    .contact-title {
        font-size: clamp(24px, 9.5vw, 48px); /* stejný clamp jako hero-intro a ostatní nadpisy */
        /* Figma (iPhone 14 Pro Max): 60 px pod nadpisem → 60/430 = 13,95 vw */
        margin-bottom: clamp(36px, 13.95vw, 60px);
    }

    .social-item {
        /* Figma: 40 px mezera mezi ikonou a textem → 40/430 = 9,3 vw */
        gap: clamp(24px, 9.3vw, 40px);
    }

    .social-item + .social-item {
        /* Figma: 80 px mezi položkami → 80/430 = 18,6 vw */
        margin-top: clamp(48px, 18.6vw, 80px);
    }

    .social-item .icon-svg {
        width: clamp(36px, 9vw, 48px);
        height: clamp(36px, 9vw, 48px);
        overflow: visible;
    }

    .social-item .text-btn {
        font-size: clamp(16px, 4.5vw, 22px);
    }

    /* --- Kontaktní callout — mobil: skryt, nahrazen .contact-cta-mobile --- */
    .contact-callout {
        display: none;
    }

    /* --- Carousel — mobil ---
       Referenční zařízení: iPhone 14 Pro Max (430 px šířka).
       Karta: 200 × 300 px → 46,51 vw / 69,77 vw.
       Mezera: 20 px → 4,65 vw.
       Mezera nad carouserem (pod nadpisem): 40 px → 9,3 vw. */
    :root {
        --carousel-item-w: clamp(140px, 46.51vw, 200px);
        --carousel-item-h: clamp(210px, 69.77vw, 300px);
        --carousel-gap:    clamp(10px,  4.65vw,  20px);
    }

    .portfolio-preview__head {
        margin-bottom: clamp(24px, 9.3vw, 40px);
    }

    .carousel__item {
        border-radius: clamp(10px, 2.5vw, 14px);
    }

    /* --- Tlačítko Celé portfolio — mobil ---
       Figma (iPhone 14 Pro Max, 430 px): 160 × 40 px, font 10 px, mezera nad 40 px.
       Přístup: padding místo pevné šířky → flex centrování textu zůstane funkční.
       Padding: 48 px desktop × (40/60) ≈ 32 px → 7,44 vw | výška 9,3 vw | font 2,33 vw.
       border-radius: zachováno stejné proporce jako desktop (14/60 × výška) → 9 px při 40 px. */
    .portfolio-preview__btn {
        height:        clamp(35.2px, 10.23vw, 44px);
        padding:       0 clamp(22px, 8.184vw, 35.2px);
        font-size:     clamp(8.8px, 2.563vw, 11px);
        border-radius: clamp(7.7px, 2.31vw, 9.9px);
        margin-top:    clamp(26.4px, 10.23vw, 44px);
        margin-bottom: 0;
    }

    /* --- Copyright sekce --- */
    .copyright-section {
        padding-bottom: clamp(28px, 8vw, 44px);
    }

    .copyright-line {
        max-width: 90%;
        margin-bottom: clamp(28px, 8vw, 44px);
    }

    .copyright-text {
        font-size: clamp(10px, 2.8vw, 14px);
        line-height: 1.7;
        padding: 0 clamp(12px, 4vw, 24px);
    }

    /* --- Logo-only hlavička (index.html) ---
       Referenční zařízení: iPhone 14 Pro Max (430 px šířka).
       Logo: 40×34 px → 9.3 vw šířka.
       Horní odstup: 40 px → 9.3 vw.
       Celková výška hlavičky: 40 + 34 + 80 = 154 px → 35.8 vw.
       position: relative → hlavička je v normálním toku stránky
       a odscrolluje se pryč (logo nepřekáží obsahu po odscrollování). */
    body:has(.mobile-header-logo-only) {
        padding-top: 0;
    }

    .top-menu:has(.mobile-header-logo-only) {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: clamp(108px, 35.8vw, 275px);
    }

    .mobile-header-logo-only {
        display: flex;
        padding-top: clamp(28px, 9.3vw, 72px);
    }

    .mobile-header-logo-only svg {
        width: clamp(28px, 9.3vw, 72px);
        height: auto;
    }
}

/* =====================================================
   RESPONSIVITA — tablet (769 px – 1399 px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1399px) {
    /* --- Hlavička — stránky S fixed top-menu (portfolio, kontakt) ---
       Výška a font se škálují s šířkou tabletu.
       Stránky s .mobile-header-logo-only (index.html) toto přebíjí níže. */
    body {
        padding-top: clamp(130px, 17vw, 200px);
    }

    .top-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        height: clamp(130px, 17vw, 200px);
    }

    /* Skrýt původní logo a pravou skupinu tlačítek */
    .top-menu .logo,
    .top-menu .right-group {
        display: none;
    }

    /* --- Hlavní obsah — O mně ---
     * Tablet: foto 400×800 px jako základ, škáluje s vw.
     * Bleed efekt zůstává, ale menší než na mobilu. */
    .about-container {
        width: 100%;
        /* Vertikální mezera od "Pár rychlých slov o mně" — tablet:
           stejný vw koeficient (7,9 vw) jako na mobilu zajišťuje plynulé
           škálování. Min 60 px (≈ 769 px), max 100 px (≈ 1266 px). */
        margin: clamp(60px, 7.9vw, 100px) 0 clamp(40px, 6vw, 60px) 0;
        overflow-x: clip;
    }

    .about-layout {
        align-items: center;  /* Střed fotky = střed textového bloku */
    }

    .about-image-box {
        width:  clamp(280px, 39vw, 400px);
        height: clamp(560px, 78vw, 800px);
        margin-left: clamp(-50px, -4.5vw, -20px);
        flex-shrink: 0;
        /* Stejný důvod jako na mobilu — viz komentář v @media (max-width: 768px). */
        will-change: opacity, transform;
    }

    .about-photo {
        border-radius: clamp(16px, 2.2vw, 24px);
    }

    /* Textový blok: výška = 75 % výšky fotky, texty rovnoměrně rozloženy.
     * margin-left = mezera mezi fotkou a textem — ZDE upravit mezeru.
     * overflow: clip ořízne animaci bez efektu scrollbaru.
     * max-width omezí délku řádku — text se na větších tabletech zalamuje na ~2 řádky. */
    .about-text-group {
        margin-left: clamp(24px, 3.5vw, 45px); /* ← mezera fotka–text: zvýšit první/prostřední hodnotu */
        padding-right: clamp(20px, 4vw, 60px);
        width: auto;
        flex: 1;
        min-width: 0;
        height: calc(clamp(560px, 78vw, 800px) * 0.75);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0;
        overflow: hidden;
        contain: layout; /* Zabrání overflow: hidden narušit stacking context animací */
    }

    .mobile-break {
    display: block; /* Pripadne 'initial' */
    }

    .about-text-group p {
        font-size: clamp(14px, 1.7vw, 18px);
        animation-name: vyjezdZprava; /* Přijíždí zprava, overflow: hidden ho ořízne */
    }

    /* --- Sekce Co fotím nejvíce — tablet ---
       margin-top sjednocen s .portfolio-preview (referenční nadpis). */
    .specialty-section {
        margin-top: clamp(120px, 14vw, 150px);
    }

    /* --- Specialty tlačítka — tablet ---
       Text a ikona zůstávají pevné (18 px / 30 px). Padding klesá s šířkou
       viewportu → prostor mezi nimi se přirozeně zmenšuje (space-between).
       min/max šířka je řízena přes minmax() na grid sloupcích výše. */
    .specialty-btn {
        padding: 0 clamp(14px, 2vw, 30px);
    }

    /* --- Kontaktní sekce — tablet --- */
    .social-footer {
        margin-top: clamp(120px, 14vw, 150px); /* sjednoceno s .portfolio-preview (referenční nadpis) */
        /* padding-bottom plynule roste od mobilní 50 px k větším hodnotám na tabletu */
        /* Levý padding sjednocen s .portfolio-preview__head (referenční nadpis) */
        padding: 0 clamp(40px, 7vw, 80px) clamp(50px, 7vw, 80px) clamp(40px, 5.2vw, 80px);
    }

    .contact-title {
        font-size: clamp(48px, 6vw, 64px); /* stejný clamp jako ostatní nadpisy na tabletu */
        margin-bottom: clamp(60px, 9vw, 90px);
    }

    .social-item {
        gap: clamp(20px, 3vw, 28px);
    }

    .social-item + .social-item {
        margin-top: clamp(60px, 10vw, 100px);
    }

    .social-item .icon-svg {
        width: clamp(40px, 6vw, 52px);
        height: clamp(40px, 6vw, 52px);
        overflow: visible;
    }

    .social-item .text-btn {
        font-size: clamp(18px, 2.5vw, 24px);
    }

    /* --- Kontaktní callout — tablet: skryt, nahrazen .contact-cta-mobile --- */
    .contact-callout {
        display: none;
    }

    /* --- Carousel — tablet ---
       Karty se proporcionálně zvětšují od mobilní základny (200 × 300 px při 430 px)
       přes tablet (cca 270 × 405 px při 900 px) až po desktop (300 × 450 px).
       30 vw zajišťuje plynulé škálování; clamp omezuje extrémní hodnoty. */
    :root {
        --carousel-item-w: clamp(200px, 30vw, 300px);
        --carousel-item-h: clamp(300px, 45vw, 450px);
        --carousel-gap:    clamp(20px,  3.5vw, 50px);
    }

    .portfolio-preview__head {
        margin-bottom: clamp(40px, 6vw, 70px);
        /* Explicitní levý padding — desktop calc(50%−450px) dává záporné hodnoty
           pod ~900 px šířky, proto sjednocujeme s ostatními nadpisy. */
        padding-left: clamp(40px, 5.2vw, 80px);
    }

    /* --- Tlačítko Celé portfolio — tablet ---
       Padding a výška plynule rostou od mobilní základny k desktopu.
       border-radius: fixní 14 px (jako desktop) — na větším tlačítku vypadá stejně. */
    .portfolio-preview__btn {
        height:        clamp(44px, 5.5vw, 66px);
        padding:       0 clamp(35.2px, 5vw, 52.8px);
        font-size:     clamp(11px, 1.3vw, 16.5px);
        border-radius: 14px;
        margin-top:    clamp(44px, 6vw, 88px);
        margin-bottom: 0;
    }

    /* --- Copyright sekce --- */
    .copyright-section {
        padding-bottom: clamp(36px, 4.5vw, 54px);
    }

    .copyright-line {
        max-width: min(90%, 1000px);
        margin-bottom: clamp(36px, 4.5vw, 54px);
    }

    .copyright-text {
        font-size: clamp(14px, 1.5vw, 16px);
    }

    /* --- Logo-only hlavička (index.html) — tablet ---
       Stejný vw koeficient (9.3 vw = 40 px / 430 px) zaručuje proporcionální škálování.
       Výška hlavičky začíná na ~275 px (769 px šířky) a roste max. do 420 px.
       position: relative → scrolluje pryč se stránkou, nepřekáží obsahu. */
    body:has(.mobile-header-logo-only) {
        padding-top: 0;
    }

    .top-menu:has(.mobile-header-logo-only) {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: clamp(275px, 35.8vw, 420px);
    }

    .mobile-header-logo-only {
        display: flex;
        padding-top: clamp(72px, 9.3vw, 120px);
    }

    .mobile-header-logo-only svg {
        width: clamp(72px, 9.3vw, 120px);
        height: auto;
    }
}
/* =====================================================
   HERO SEKCE
   ===================================================== */

.hero {
    position: relative;
    width: 100%;
    /* Výška: dost místa pro texty + šipku (350px od vrchu + ~80px text + 100px + šipka) */
    height: 600px;
    overflow: hidden;
}

.hero__foto {
    position: absolute;
    top: 200px;
    left: calc(50% + 100px);
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--element-color);
    
    /* FLEXBOX PRO DOKONALÉ VYCENTROVÁNÍ */
    display: inline-flex;
    align-items: center; 
    white-space: nowrap;

    /* Explicitní GPU compositing vrstva (silnější než will-change: transform).
       Backdrop-filter blur na sticky headeru pak vzorkuje z GPU cache textury
       místo live main-thread repaintu → eliminuje trhnutí. */
    transform: translateZ(0);
}

/* Blikající kurzor */
.hero__foto::after {
    content: "";
    margin-left: 8px;
    width: 4px;
    height: 0.85em;
    background-color: var(--element-color); /* Barva vždy nastavená, viditelnost řídí opacity */
    animation: blinkCursor 0.8s step-end infinite;
}

/* OPRAVA TRHÁNÍ: opacity je compositor-thread property — žádný main-thread repaint.
   Původní background-color animace spouštěla repaint 2× za 0.8s, což při backdrop-filter
   blur na sticky menu způsobovalo záškub v přesném scrollovém bodě kde menu překrývá text. */
@keyframes blinkCursor {
    from, to { opacity: 1; }
    50%       { opacity: 0; }
}

.hero__tvorba {
    position: absolute;
    top: 350px;
    /* Pravý okraj "Tvorba" končí 84px vlevo od středu stránky */
    right: calc(50% + 84px);
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    color: var(--element-color);
    text-decoration: underline;
    text-decoration-color: var(--green-color);
    text-decoration-thickness: 8px;   /* 10 % z 80px */
    text-underline-offset: 20px;      /* 25 % z 80px */
}

/* "Pavel Klíma" — 150 px nad horním okrajem "Tvorba" (top: 350px),
   pravý okraj textu 250 px vlevo od středu stránky (= shodně s Figmou). */
.hero__name {
    position: absolute;
    top: 130px; /* 350px − 150px mezera − ~24px výška řádku */
    right: calc(50% + 250px);
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    color: var(--element-color);
    opacity: 0.5;
    white-space: nowrap;
}

/* "Z Prahy po celý svět." — 150 px pod spodním okrajem "Foto" (top: 200px + 80px výška).
   Levý okraj 90 px vpravo od středu stránky (= shodně s Figmou). */
.hero__location {
    position: absolute;
    top: 460px; /* 200px + 80px (výška Foto) + 150px mezera */
    left: calc(50% + 90px);
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    color: var(--element-color);
    opacity: 0.5;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

/* Container vyřeší absolutní pozici a vycentrování */
.hero__arrow-container {
    position: absolute;
    top: calc(350px + 80px + 100px);
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
}

.hero__arrow {
    color: var(--element-color);
    animation: bounce 2s infinite;
}

/* Jemné poskakování šipky pro lepší UX (lze smazat) */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* =====================================================
   INTRO TEXT POD HERO SEKCÍ
   ===================================================== */

.hero-intro {
    /* 80px pod šipkou hero sekce */
    margin-top: 80px;
    /* Horizontální pozice: šipka je na 50% → text začíná 450px vlevo od ní */
    padding-left: calc(50% - 450px);
    /* Izoluje reflow z typing animace — zabrání šíření do sticky headeru */
    contain: layout;
}

.hero-intro__text {
    margin: 0;
    font-family: 'Helvetica-Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    line-height: 1.2;
    color: var(--element-color);
    /* Vyhradí místo pro oba řádky od začátku (2 × line-height 1.2 = 2.4em)
       → při dopisu 2. řádku se obsah pod tím nepohne */
    min-height: 2.4em;
}

.hero-intro__line1 {
    font-weight: 700;
    font-style: normal;
}

.hero-intro__line2 {
    font-weight: 700;
    font-style: italic;
}

.hero-intro__last-char {
    letter-spacing: 0.1em; /* 10 % z 64px = 6.4px */
}

.hero-intro__dots {
    color: var(--green-color);
}

/* Znaky vypisované typing animací — viz omne.js.
   Neviditelnost/odhalení řeší výhradně opacity (WAAPI), nikdy DOM mutace. */
.hero-intro__char {
    display: inline-block;
}

/* =====================================================
   HERO INTRO — KURZOR ANIMACE PSANÍ
   Kurzor je "slot" (position: absolute, řízený přes transform/opacity
   z JS pomocí Web Animations API) obalující vnitřní pruh, který si
   nezávisle bliká přes CSS. Obě vrstvy mění pouze transform/opacity
   → čistě compositor, nikdy nevyvolají paint invalidaci okolí (a tedy
   ani zbytečné přepočítání .bottom-nav backdrop-filter). */
.hero-intro__cursor-slot {
    position: absolute;
    left: 0;
    top: 0.2em;
    line-height: 0;
    will-change: transform, opacity;
}

.hero-intro__cursor {
    display: inline-block;
    width: 3px;
    height: 0.8em;
    background-color: var(--element-color);
    margin-left: 1px;
    border-radius: 1px;
    animation: introCursorBlink 0.9s step-end infinite;
}

.hero-intro__cursor--green {
    background-color: var(--green-color);
}

@keyframes introCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* =====================================================
   SPODNÍ NAVIGAČNÍ MENU
   Viditelné pouze na mobilu (≤768px) a tabletu (769–1399px).
   Na desktopu (≥1400px) je skryté.
   Přizpůsobeno dark/light módu stránky.
   ===================================================== */

/* --- Odsazení stránky, aby obsah nepřepadal pod menu --- */
@media (max-width: 1399px) {
    body {
        padding-bottom: 80px;
    }
}

/* --- Kontejner menu --- */
.bottom-nav {
    display: none; /* Skryté na desktopu */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    /* Vlastní GPU compositor layer — backdrop-filter dostane dedikovanou texturu.
       Spolu s contain: layout paint na .hero-intro (viz níže) tvoří kompletní
       izolaci: mutace uvnitř hero-intro nepropagují paint invalidaci sem. */
    transform: translateZ(0);
    will-change: transform;

    /* ── Odložený start "liquid glass" efektu ─────────────────────────
       Dokud se stránka donačítá (webfonty přes FOUT mění šířku textu,
       obrázky mění výšku layoutu), každý takový reflow za fixed elementem
       s backdrop-filter donutí prohlížeč přepočítat blur → viditelné
       bliknutí menu hned po načtení stránky (a při každé plné navigaci
       mezi stránkami, protože jde o vícestránkový web, ne SPA).
       Řešení: dokud stránka není plně načtená (fonty + obrázky), menu má
       jen plnou barvu bez blur — tu žádný reflow nerozhodí. Jakmile
       proběhne window "load" (viz omne.js), třída .bottom-nav--ready
       jednorázově a plynule (transition) zapne gradient + blur. */
    background: var(--bg-color);
    transition: background 0.4s ease,
                backdrop-filter 0.4s ease,
                -webkit-backdrop-filter 0.4s ease;

    border-top: 1px solid color-mix(in srgb, var(--element-color) 20%, transparent);

    /* Safe area pro zařízení s výřezem (iPhone X a novější) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav--ready {
    /* Liquid Glass — stejný přístup jako .top-menu, gradient vertikální (zdola nahoru) */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg-color) 85%, transparent) 0%,
        color-mix(in srgb, var(--bg-color) 75%, transparent) 50%,
        color-mix(in srgb, var(--bg-color) 85%, transparent) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bottom-nav ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 68px;
    position: relative;
}

/* --- Jednotlivé položky --- */
.bottom-nav__item {
    position: relative;
    flex: 1;
    height: 68px;
    z-index: 1;
}

.bottom-nav__item a,
.bottom-nav__item button.bottom-nav__theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--element-color);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* --- Ikona --- */
.bottom-nav__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.3s ease,
                opacity 0.3s ease;
    color: var(--element-color);
    opacity: 0.45;
}

.bottom-nav__icon svg {
    width: 24px;
    height: 24px;
    transition: inherit;
    fill: currentColor;
}

/* --- Popis --- */
.bottom-nav__text {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--element-color) 45%, transparent);
    transition: opacity 0.35s ease, color 0.3s ease;
    opacity: 0;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
}

/* --- Aktivní stav --- */
.bottom-nav__item.active .bottom-nav__icon {
    transform: translateY(-10px);
    color: var(--element-color);
    opacity: 1;
}

.bottom-nav__item.active .bottom-nav__text {
    opacity: 1;
    color: var(--element-color);
}


/* --- Hover efekt na dotykových zařízeních (hover: none) není třeba,
       na desktopu se menu nezobrazuje --- */
@media (hover: hover) {
    .bottom-nav__item:not(.active) a:hover .bottom-nav__icon,
    .bottom-nav__item:not(.active) button:hover .bottom-nav__icon {
        color: color-mix(in srgb, var(--element-color) 70%, transparent);
        transform: translateY(-4px);
    }
}

/* --- Indikátor (zelený proužek za aktivní ikonou) --- */
.bottom-nav__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Šířka se nastaví přes JS na šířku jedné položky */
    height: 3px;
    background-color: var(--green-color);
    border-radius: 0 0 3px 3px;
    transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
    pointer-events: none;
}

/* --- Přepínač tématu uvnitř menu — sdílí SVG ikony z hlavičky --- */
.bottom-nav__theme-btn .bottom-nav__icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.bottom-nav__theme-btn .bottom-nav__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.bottom-nav__theme-btn .bottom-nav__icon .mesic-svg {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.bottom-nav__theme-btn .bottom-nav__icon .slunce-svg {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

[data-theme="dark"] .bottom-nav__theme-btn .bottom-nav__icon .slunce-svg {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

[data-theme="dark"] .bottom-nav__theme-btn .bottom-nav__icon .mesic-svg {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* --- Zobrazení menu na mobilu a tabletu --- */
@media (max-width: 1399px) {
    .bottom-nav {
        display: block;
    }
}

/* =====================================================
   HERO SEKCE — responsivita (mobil + tablet, ≤1399 px)
   Přepnutí z absolutního desktop layoutu na flex column.
   Referenční zařízení: iPhone 14 Pro Max (430 px šířka).
   Všechny vw koeficienty: hodnota_px / 430 × 100.
   ===================================================== */
@media (max-width: 1399px) {

    /* Kontejner: z fixed-height position:relative → auto-height flex column.
       overflow-x: clip ořízne záměrný přesah textů (bleed efekt)
       aniž by omezil overflow-y nebo spustil scroll. */
    .hero {
        height: auto;
        overflow-x: clip;
        overflow-y: visible;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* "Pavel Klíma" — levá strana hero, pravý okraj 70 px od středu stránky.
       Figma referenční hodnoty (iPhone 14 Pro Max, 430 px šířka):
         font-size: 20 px → 4,65 vw
         pravý okraj od středu: 70 px → 16,28 vw
       Max clamp zvýšen na 36 px aby text rostl i na větších telefonech/tabletech.
       align-self: flex-end + margin-right: calc(50% + …) je stejná technika
       jako u .hero__tvorba — ukotvení pravého okraje textu od středu. */
    .hero__name {
        display: block;
        position: static;
        font-size: clamp(14px, 4.65vw, 36px);
        font-weight: normal;
        font-style: normal;
        opacity: 0.5;
        white-space: nowrap;
        align-self: flex-end;
        margin-right: calc(50% + clamp(40px, 16.28vw, 70px));
        margin-bottom: 0;
    }

    /* "Z Prahy po celý svět." — pravá strana hero, levý okraj 20 px od středu stránky.
       Figma referenční hodnoty (iPhone 14 Pro Max, 430 px šířka):
         font-size: 20 px → 4,65 vw
         levý okraj od středu: 20 px → 4,65 vw
       Max clamp zvýšen na 36 px aby text rostl i na větších telefonech/tabletech.
       margin-top zvýšen ~15 % (10 px → 12 px) pro posunutí o cca 10–20 % níž.
       order: 1 přesouvá tento prvek za .hero__tvorba (order: 0, výchozí)
       ale před .hero__arrow-container (order: 2). */
    .hero__location {
        display: block;
        position: static;
        font-size: clamp(14px, 4.65vw, 36px);
        font-weight: 300;
        font-style: italic;
        opacity: 0.5;
        white-space: nowrap;
        align-self: flex-start;
        margin-left: calc(50% + clamp(3px, 1.63vw, 7px));
        padding-left: clamp(4px, 1.4vw, 6px);
        margin-top: clamp(14px, 5.12vw, 22px);
        order: 1;
    }

    /* "Foto Video" — text začíná 50 px vpravo od středu stránky.
       50 px / 430 px = 11,6 vw. Záměrně přetéká vpravo → clippuje hero.
       min-height: 1.2em — prvek nikdy neskolabuje na 0 výšku, i když je
       textContent prázdný (fáze mazání). Bez toho vše níže skokově přiskočí
       nahoru a po začátku psaní zpět dolů → trhavý efekt. */
    .hero__foto {
        position: static;
        font-size: clamp(30px, 11.16vw, 64px);
        margin-left: calc(50% + clamp(10px, 11.6vw, 100px));
        min-height: 1.2em;
    }

    /* "Tvorba" — anchor od středu, stejná logika jako "Foto/Video":
         "Foto/Video" → levý  okraj = střed + 50 px (margin-left)
         "Tvorba"     → pravý okraj = střed − 15 px (align-self + margin-right)
       Text a zelená podlinka tak končí 15 px vlevo od středu stránky.
       Podtržení škálováno proporcionálně k font-size:
       tloušťka 10 % (1,16 vw), offset 15 px z Figmy (3,49 vw). */
    .hero__tvorba {
        position: static;
        font-size: clamp(30px, 11.16vw, 64px);
        margin-top: clamp(14px, 7vw, 30px);
        align-self: flex-end;
        margin-right: calc(50% + clamp(6px, 3.49vw, 15px));
        text-decoration-thickness: clamp(3px, 1.16vw, 5px);
        text-underline-offset: clamp(8px, 3.49vw, 15px);
    }

    /* Šipka — centrovaná, mezera pod zelenou linkou.
       order: 2 zajistí, že šipka zůstane vždy úplně poslední
       (za .hero__location, která má order: 1).
       margin-top zkrácen o výšku .hero__location (~26 px) + její margin-top (~10 px),
       aby celková vzdálenost Tvorba → šipka zůstala stejná jako bez "Z Prahy":
       původní 90 px − 10 px (margin) − 26 px (výška) = 54 px → 12,56 vw. */
    .hero__arrow-container {
        position: static;
        transform: none;
        align-self: center;
        margin-top: clamp(20px, 10.23vw, 44px);
        order: 2;
    }

    /* Proporcionální zmenšení SVG šipky.
       28 px / 430 px = 6,5 vw. */
    .hero__arrow {
        width: clamp(18px, 6.5vw, 28px);
        height: auto;
        overflow: visible;
    }
}

/* =====================================================
   INTRO TEXT — responsivita (mobil + tablet, ≤1399 px)
   "Pár rychlých slov o mně..."
   Mezera 60 px pod šipkou = 14 vw při 430 px.

   font-size: 9,5 vw místo 11,16 vw z hero → text "Pár rychlých slov"
   se nevleze na šířku 320–375 px při větším font-size a zalamoval by
   na 3 řádky. Při 430 px = cca 41 px (mírně menší než hero 48 px),
   při 320 px = cca 30 px → "Pár rychlých slov" pohodlně na 1 řádku.

   min-height: 2.4em zachovává rezervaci pro oba řádky od začátku
   (stejný princip jako na desktopu) → žádné skokové odskočení obsahu
   pod textem při dopisu 2. řádku typing animací.
   ===================================================== */
@media (max-width: 1399px) {

    .hero-intro {
        /* Levý padding sjednocen s .portfolio-preview__head (referenční nadpis).
           Na tabletu bude přebito pravidlem níže (min-width: 769px). */
        padding-left: clamp(16px, 5vw, 40px);
        padding-right: clamp(8px, 2vw, 16px);
        margin-top: clamp(36px, 14vw, 60px);    /* 60 px pod šipkou při 430 px */
        /* contain: layout paint
           – layout: layout reflow se nešíří mimo tento element (stejné jako dřív)
           – paint: KLÍČOVÁ OPRAVA — vytváří explicitní paint boundary.
             Chrome při DOM mutacích (přidávání text nodů typing animací) invaliduje
             paint v rámci tohoto elementu, ale paint invalidace nepřeteče ven.
             Bottom-nav's backdrop-filter pak ví, že pixely mimo hero-intro se
             nezměnily → nepřepočítává backdrop → žádné blikání na Chrome/Android.
             Bez `paint` containment Chrome konzervativně invaliduje celý dokument
             a backdrop-filter se při každém znaku znovu renderuje. */
        contain: layout paint;
        /* translateZ(0): compositor layer hint — podpoří izolaci od about-image-box */
        transform: translateZ(0);
    }

    .hero-intro__text {
        font-size: clamp(48px, 6vw, 64px);    /* ~41 px při 430 px, ~30 px při 320 px */
        /* height místo min-height: zabrání subpixelovému zaokrouhlování při DPR 3
           (iPhone 14 Pro Max), kdy reálná výška 2 řádků o ~1 px přesáhne min-height
           a způsobí layout jump fotky pod textem. Fixní výška je imunní vůči DPR. */
        height: 2.4em;
    }
}

@media (max-width: 768px) {
    .hero-intro__text {
        font-size: clamp(24px, 9.5vw, 48px);
    }
    
}

/* =====================================================
   SJEDNOCENÍ LEVÉHO OKRAJE NADPISŮ — TABLET
   Na tabletu přebíjí max-width: 1399px pravidlo výše.
   Všechny tři sekce sdílejí stejnou hodnotu jako
   .portfolio-preview__head (referenční nadpis).
   ===================================================== */
@media (min-width: 769px) and (max-width: 1399px) {
    .hero-intro {
        padding-left: clamp(40px, 5.2vw, 80px);
    }
}

/* =====================================================
   SOCIAL-FOOTER — responsivita (mobil + tablet, ≤1399 px)
   Referenční zařízení: iPhone 14 Pro Max (430 px šířka).
   Figma hodnoty (vw koeficienty: px / 430 × 100):
     levý padding (okraj → ikona): 60 px → 13,95 vw
     mezera nadpis → 1. položka:  60 px → 13,95 vw
     mezera mezi položkami:        80 px → 18,60 vw
     gap ikona → text:             40 px → 9,30  vw
     spodní padding:               60 px → 13,95 vw
   ===================================================== */
@media (max-width: 1399px) {

    /* Padding kontejneru shodný s ostatními nadpisovými sekcemi
       (portfolio-preview__head, hero-intro) → nadpis zarovnán doleva stejně.
       Ikony dostanou extra margin-left níže. */
    .social-footer {
        padding-left:   clamp(16px, 5vw, 40px);
        padding-right:  clamp(16px, 5vw, 60px);
        padding-bottom: clamp(40px, 13.95vw, 100px);
    }

    /* Mezera pod nadpisem — 60 px při 430 px */
    .contact-title {
        margin-bottom: clamp(40px, 13.95vw, 100px);
    }

    /* Ikony mají být 60 px od okraje (Figma).
       footer padding = ~21,5 px při 430 px (5 vw),
       potřebný extra indent = 60 − 21,5 = 38,5 px → 8,95 vw.
       clamp: min 20 px (320 px), max 40 px (tablet). */
    .social-item {
        gap:         clamp(18px, 8.4vw, 36px);
        align-items: center;
        margin-left: clamp(20px, 8.95vw, 40px);
    }

    /* Mezera mezi položkami: 80 px při 430 px */
    .social-item + .social-item {
        margin-top: clamp(50px, 18.6vw, 120px);
    }

    /* Ikona: 30 px (Figma „30 Hug × 30 Hug") */
    .social-item .icon-svg {
        width:      clamp(26px, 6.98vw, 30px);
        height:     clamp(26px, 6.98vw, 30px);
        flex-shrink: 0;
    }

    /* Text: mírně škálovaný, nikdy nezalomí */
    .social-item .text-btn {
        font-size:   clamp(16px, 4.65vw, 20px);
        white-space: nowrap;
    }
}

/* =====================================================
   SOCIAL-FOOTER — TABLET (≥769 px)
   Přebijeme padding a margin-left ikon na tabletové hodnoty
   shodné s ostatními sekcemi.
   ===================================================== */
@media (min-width: 769px) and (max-width: 1399px) {
    .social-footer {
        padding-left: clamp(40px, 5.2vw, 80px);
    }

    /* Na tabletu je padding už dostatečně velký,
       extra indent ikon zredukujeme. */
    .social-item {
        margin-left: clamp(0px, 2vw, 20px);
    }
}
/* =====================================================
   MOBILNÍ / TABLETOVÉ TLAČÍTKO KONTAKT
   Kopíruje všechny vlastnosti .portfolio-preview__btn
   (font, výška, padding, border-radius, barvy, hover).
   Navíc: width (70 % mobil → 50 % tablet), gap + ikona.
   ===================================================== */

/* Skryto na desktopu */
.contact-cta-mobile {
    display: none;
}

/* ── Sdílené vlastnosti pro mobil i tablet (≤1399 px) ── */
@media (max-width: 1399px) {

    .contact-cta-mobile {
        /* Stejné základy jako .portfolio-preview__btn */
        display:          flex;
        align-items:      center;
        justify-content:  center;
        text-decoration:  none;
        background-color: var(--element-color);
        color:            var(--green-color);
        font-family:      'Poppins', sans-serif;
        font-weight:      700;
        letter-spacing:   0.08em;
        border-radius:    14px;
        transition:       opacity 0.2s ease, transform 0.2s ease;

        /* Margins ze šipek ve Figmě (60 px nahoře, 50 px dole při 430 px) */
        margin-top:    clamp(36px, 13.95vw, 60px);
        /*margin-bottom: clamp(28px, 11.63vw, 50px);*/
        align-self:    center;
    }

    /* Text — explicitní barva s !important (přebije default link color v prohlížeči) */
    .contact-cta-mobile__text {
        margin:         0;
        white-space:    nowrap;
        color:          var(--green-color) !important;
        font-family:    'Poppins', sans-serif;
        font-weight:    700;
        letter-spacing: 0.08em;
    }

    /* Ikona letadla */
    .contact-cta-mobile__icon {
        flex-shrink: 0;
        fill:        var(--bg-color);
    }
}

/* ── Mobil (≤768 px) — přesné clamp hodnoty z .portfolio-preview__btn na mobilu ── */
@media (max-width: 768px) {
    .contact-cta-mobile {
        display:         flex;
        align-items:     center;
        justify-content: center;
        height:          clamp(35.2px, 10.23vw, 44px);
        padding:         0 clamp(22px, 8.184vw, 35.2px);
        font-size:       clamp(8.8px, 2.563vw, 11px);
        border-radius:   clamp(7.7px, 2.31vw, 9.9px);
        gap:             clamp(8px, 3vw, 14px);
        width:           70%;
    }
    .contact-cta-mobile__text {
        font-size: clamp(8.8px, 2.563vw, 11px);
    }
    .contact-cta-mobile__icon {
        width:  clamp(13px, 3.84vw, 16.5px);
        height: clamp(13px, 3.84vw, 16.5px);
        overflow: visible;
    }
}

/* ── Tablet (769–1399 px) — přesné clamp hodnoty z .portfolio-preview__btn na tabletu ── */
@media (min-width: 769px) and (max-width: 1399px) {
    .contact-cta-mobile {
        display:         flex;
        align-items:     center;
        justify-content: center;
        height:          clamp(44px, 5.5vw, 66px);
        padding:         0 clamp(35.2px, 5vw, 52.8px);
        font-size:       clamp(11px, 1.3vw, 16.5px);
        border-radius:   14px;
        gap:             clamp(12px, 1.95vw, 22px);
        width:           50%;
    }
    .contact-cta-mobile__text {
        font-size: clamp(11px, 1.3vw, 16.5px);
    }
    .contact-cta-mobile__icon {
        width:  clamp(16.5px, 1.95vw, 24.75px);
        height: clamp(16.5px, 1.95vw, 24.75px);
        overflow: visible;
    }
}

/* ── Hover (pouze myšová zařízení) — shodný s .portfolio-preview__btn ── */
@media (hover: hover) {
    .contact-cta-mobile:hover {
        opacity:   0.85;
        transform: scale(1.03);
    }
}