/* ================================
   PORTFOLIO V2
   Bento grid with product mockups
   Inspired by Yash Gadikar
   ================================ */

html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
}

:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --text-muted: #555555;
    --accent: #e85d3b;
    --gray-light: #e8e8e8;
    --gray: #999999;

    --font-main: 'Space Grotesk', -apple-system, sans-serif;
}

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

body {
    overflow-x: clip;
}

body {
    font-family: var(--font-main);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--bg);
    font-size: 0.875rem;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
}

.nav-icon:hover {
    background: var(--accent);
}

.nav-divider {
    color: var(--gray);
    margin: 0 0.5rem;
}

.nav-email {
    color: var(--text);
    text-decoration: none;
}

.nav-right {
    display: flex;
    gap: 2rem;
}

.nav-right a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.06);
    transition: color 0.3s, background 0.3s;
}

.nav-right a:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.1);
}

/* ================================
   BENTO GRID
   ================================ */

.projects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: 80px 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Large item spans 2 rows */
.project--large {
    grid-row: span 2;
}

/* ================================
   PROJECT ITEM
   ================================ */

.project {
    position: relative;
    padding: 2rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    margin-bottom: 1rem;
}

.project--large .project-visual {
    min-height: 400px;
}

/* Grayscale by default */
.project-visual * {
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project:hover .project-visual * {
    filter: grayscale(0%);
}

/* Title & subtitle */
.project-info {
    transition: opacity 0.3s ease;
}

.project-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.project-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ================================
   HOVER INFO PANEL
   ================================ */

.project-hover {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    background: var(--bg);
    padding: 1rem;
    border-top: 1px solid var(--gray-light);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.project:hover .project-hover {
    opacity: 1;
    transform: translateY(0);
}

.project:hover .project-info {
    opacity: 0;
}

.hover-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-light);
}

.project-hover h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.project-hover p {
    font-size: 0.875rem;
    color: var(--accent);
}

/* ================================
   DECORATIVE ELEMENT
   ================================ */

.project-decor {
    position: absolute;
    width: 280px;
    height: 280px;
    color: var(--gray);
    z-index: 0;
}

/* ================================
   MOCKUP: PHONE
   ================================ */

.project-mockup--phone {
    position: relative;
    z-index: 1;
}

.mockup-screen {
    width: 120px;
    height: 240px;
    background: var(--gray-light);
    border-radius: 20px;
    padding: 1rem 0.75rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: rotate(-5deg);
}

.mockup-header {
    height: 20px;
    background: #4a90a4;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.mockup-card {
    height: 40px;
    background: #e85d3b;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.mockup-card:nth-child(2) {
    background: #f4a259;
}

.mockup-text {
    height: 12px;
    width: 60%;
    background: #688e26;
    border-radius: 2px;
}

/* ================================
   MOCKUP: CASSETTE
   ================================ */

.project-mockup--cassette {
    display: flex;
    gap: -20px;
}

.cassette {
    width: 140px;
    height: 90px;
    background: #f5ebe0;
    border-radius: 6px;
    padding: 0.75rem;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.cassette:first-child {
    background: #faa613;
}

.cassette--tilted {
    transform: rotate(8deg) translateX(-30px);
    z-index: -1;
}

.cassette-window {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.cassette-reel {
    width: 24px;
    height: 24px;
    border: 3px solid #550527;
    border-radius: 50%;
    background: #fdf6e8;
}

.cassette-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

/* ================================
   MOCKUP: STAMPS
   ================================ */

.project-mockup--stamps {
    display: flex;
    gap: 0.5rem;
}

.stamp-mock {
    width: 80px;
    height: 100px;
    background: #fdf6e8;
    padding: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.stamp-mock:first-child .stamp-mock-img {
    background: #550527;
}

.stamp-mock--tilted .stamp-mock-img {
    background: #faa613;
}

.stamp-mock--tilted {
    transform: rotate(12deg) translateY(-10px);
}

.stamp-mock-inner {
    height: 100%;
    border: 1px dashed var(--gray);
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.stamp-mock-img {
    flex: 1;
    background: var(--accent);
    margin-bottom: 4px;
}

.stamp-mock span {
    font-size: 0.65rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-muted);
}

/* ================================
   MOCKUP: PHONES (multiple)
   ================================ */

.project-mockup--phones {
    display: flex;
    position: relative;
}

.phone-mock {
    width: 70px;
    height: 140px;
    background: #2d2a32;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}

.phone-mock--back {
    position: absolute;
    left: 50px;
    transform: rotate(10deg);
    z-index: -1;
}

.phone-screen {
    height: 100%;
    background: white;
    border-radius: 8px;
    padding: 8px;
}

.phone-ui {
    height: 20px;
    background: #4a90a4;
    border-radius: 3px;
}

.phone-mock--back .phone-ui {
    background: #f4a259;
}

/* ================================
   MOCKUP: LOGO/LETTERING
   ================================ */

.project-mockup--logo {
    width: 100%;
}

.logo-art {
    width: 180px;
    height: 70px;
}

.logo-text {
    font-family: var(--font-main);
    font-size: 48px;
    font-weight: 700;
    fill: none;
    stroke: #e85d3b;
    stroke-width: 1.5;
}

/* ================================
   MOCKUP: 3D TEXT
   ================================ */

.project-mockup--3d {
    perspective: 500px;
}

.text-3d {
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray);
    letter-spacing: 0.1em;
}

.text-3d span:first-child {
    position: relative;
    z-index: 1;
    color: var(--text);
}

.text-3d-shadow {
    position: absolute;
    top: 4px;
    left: 4px;
    color: #e85d3b;
    z-index: 0;
}

/* ================================
   MOCKUP: PACKAGE BOX
   ================================ */

.project-mockup--package {
    perspective: 500px;
}

.package-box {
    display: flex;
    transform: rotateY(-15deg);
}

.package-front {
    width: 80px;
    height: 110px;
    background: #688e26;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.package-side {
    width: 25px;
    height: 110px;
    background: #4a7c1a;
    transform: rotateY(90deg) translateZ(12px) translateX(-12px);
}

.package-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fdf6e8;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
}

/* ================================
   MOCKUP: CARDS
   ================================ */

.project-mockup--cards {
    display: flex;
    position: relative;
    justify-content: center;
}

.card-mock {
    width: 60px;
    height: 85px;
    background: #fdf6e8;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
}

.card-mock--tilted {
    transform: rotate(-8deg) translateX(-15px);
    z-index: 1;
}

.card-mock--back {
    transform: rotate(12deg) translateX(-30px);
    z-index: 0;
}

.card-face {
    height: 100%;
    background: linear-gradient(135deg, #e85d3b 0%, #f4a259 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-face--back {
    background: linear-gradient(135deg, #550527 0%, #a10702 100%);
}

/* ================================
   MOCKUP: BROWSER
   ================================ */

.project-mockup--browser {
    width: 100%;
    display: flex;
    justify-content: center;
}

.browser-mock {
    width: 160px;
    background: #fdf6e8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}

.browser-bar {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: #e8e8e8;
}

.browser-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}

.browser-dot:nth-child(1) {
    background: #e85d3b;
}

.browser-dot:nth-child(2) {
    background: #faa613;
}

.browser-dot:nth-child(3) {
    background: #688e26;
}

.browser-content {
    padding: 12px;
}

.browser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.browser-item {
    aspect-ratio: 1;
    background: #4a90a4;
    border-radius: 3px;
}

.browser-item:nth-child(2) {
    background: #e85d3b;
}

.browser-item:nth-child(3) {
    background: #688e26;
}

/* ================================
   DETAIL PAGES
   ================================ */

.nav-back {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.06);
    transition: color 0.3s, background 0.3s;
}

.nav-back:hover {
    color: var(--accent);
}

.nav-active {
    color: var(--accent) !important;
    font-weight: 600;
    background: rgba(232, 93, 59, 0.1);
}

.page-header {
    padding: 120px 2rem 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.page-count {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--accent);
    background: rgba(232, 93, 59, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    padding: 2rem 0 1rem;
    border-top: 1px solid var(--gray-light);
    margin-top: 2rem;
}

.projects-list {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.project-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--gray-light);
    align-items: center;
}

.project-detail:last-child {
    border-bottom: none;
}

.project-detail-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.project-detail:hover .project-detail-visual {
    filter: grayscale(0%);
}

/* Image preview variant — a real product screenshot (e.g. baked
   laptop mockup) instead of the abstract browser/phone mockups.
   Same grayscale-to-color hover as the standard visuals. */
.project-detail-visual--image {
    min-height: 180px;
    width: 100%;
    max-width: 300px;
}

.project-detail-preview {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

.project-detail:hover .project-detail-preview {
    transform: scale(1.02);
}

/* Minifigs card variant */
.project-detail-visual--minifigs {
    background: linear-gradient(135deg, #50254B 0%, #3D1A3D 100%);
    border-radius: 12px;
    padding: 1.5rem;
    perspective: 600px;
    overflow: hidden;
    position: relative;
}

.project-detail-visual--minifigs::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}

.project-detail:hover .project-detail-visual--minifigs::after {
    animation: shimmer 0.7s ease forwards;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 150%; }
}

.project-detail-visual--minifigs img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s ease, filter 0.4s ease;
}

.project-detail:hover .project-detail-visual--minifigs img {
    transform: translateY(-8px) scale(1.05) rotate(1deg);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}

.project-detail:has(.project-detail-visual--minifigs) .project-detail-number {
    color: #50254B;
}

.project-detail:has(.project-detail-visual--minifigs) .project-detail-tags span {
    background: rgba(80, 37, 75, 0.1);
    color: #50254B;
}


.project-detail-content {
    position: relative;
}

.project-detail-number {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 3rem;
    font-weight: 700;
    color: var(--gray-light);
    line-height: 1;
}

.project-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.project-wip {
    display: inline-block;
    font-size: 0.7rem;
    color: #fff;
    background: var(--accent);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.project-detail-desc {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: 500px;
}

.project-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-detail-tags span {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--gray-light);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Alt card face color */
.card-face--alt {
    background: linear-gradient(135deg, #4a90a4 0%, #688e26 100%);
}

/* ================================
   ABOUT PAGE
   ================================ */

.about-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 2rem 4rem;
}

.about-hero {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--gray-light);
}

.photo-placeholder {
    width: 200px;
    height: 200px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.2rem;
}

.about-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.about-role {
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.about-bio {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.about-section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--gray-light);
}

.about-section:last-child {
    border-bottom: none;
}

.about-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.5rem;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.skill-category h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

.skill-category ul {
    list-style: none;
}

.skill-category li {
    font-size: 0.95rem;
    color: var(--text-muted);
    padding: 0.35rem 0;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-light);
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

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

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateX(-4px);
}

.timeline-date {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0.25rem 0;
}

.timeline-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Personal */
.about-personal {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Contact Links */
.about-contact .contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--gray-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
}

.contact-link:hover {
    background: var(--accent);
    color: #fff;
}

.contact-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: #fff;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.contact-link:hover .contact-icon {
    background: #fff;
    color: var(--accent);
}

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

.footer {
    padding: 3rem 2rem;
    border-top: 1px solid var(--gray-light);
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Language Switch */
.lang-switch {
    display: flex;
    gap: 0.25rem;
    background: var(--gray-light);
    padding: 0.25rem;
    border-radius: 6px;
}

.lang-switch a {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.3s;
}

.lang-switch a:hover {
    color: var(--text);
}

.lang-switch a.active {
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Dark Mode Toggle */
.theme-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-light);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.theme-toggle:hover {
    background: var(--gray);
}

/* Dark Mode Styles */
[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #f0f0f0;
    --text-muted: #888888;
    --gray-light: #2a2a2a;
    --gray: #404040;
}

[data-theme="dark"] .nav {
    background: #1a1a1a;
}

[data-theme="dark"] .nav-icon {
    background: #f0f0f0;
    color: #1a1a1a;
}

[data-theme="dark"] .project-hover {
    background: #1a1a1a;
}

[data-theme="dark"] .theme-toggle {
    background: #2a2a2a;
}

/* ================================
   404 PAGE
   ================================ */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.error-code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--gray-light);
    line-height: 1;
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

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

.error-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}

.error-link:hover {
    background: #d04a2a;
}

/* CV Download Button */
.cv-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
    margin-top: 1rem;
}

.cv-download:hover {
    background: #d04a2a;
}

/* ================================
   PROJECT DETAIL PAGE
   ================================ */

/* Full-width hero image at top */
.project-hero-image {
    width: 100%;
    margin-top: 60px;
    background: var(--gray-light);
    overflow: hidden;
}

.project-hero-image img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

/* Title section below hero image */
.project-hero--below-image {
    padding: 1rem 2rem 0.5rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.project-hero--below-image .project-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.project-hero--below-image .project-hero-category {
    display: block;
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin: 0;
}

.project-hero {
    padding: 2rem 2rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.project-hero.project-hero--below-image {
    padding: 1.5rem 2rem 1rem;
}

.project-hero-category {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.project-hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.project-hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.project-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-light);
}

.meta-row {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.meta-item--full {
    width: 100%;
    max-width: 100%;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-light);
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 100%;
}

.meta-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-value {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

.meta-subtle {
    color: var(--text-muted);
    font-weight: 400;
}

/* Method/technique tags — wrapping pill list */
.method-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.method-tags span {
    font-size: 0.85rem;
    color: var(--text);
    background: var(--gray-light);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

/* Vylet project — meta labels more prominent (bigger, bolder, dark green) */
body:has(.project-hero-image--vylet) .meta-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2B5740;
    letter-spacing: 0.07em;
}

[data-theme="dark"] body:has(.project-hero-image--vylet) .meta-label {
    color: #FE7762;
}

/* Vylet project — saturated dark green bg with white text (on-brand, high contrast) */
body:has(.project-hero-image--vylet) .method-tags span {
    background: #2B5740;
    color: #fff;
    font-weight: 600;
}

[data-theme="dark"] body:has(.project-hero-image--vylet) .method-tags span {
    background: #2B5740;
    color: #fff;
}

/* Project Content */
.project-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
    box-sizing: border-box;
}

.project-section {
    margin-bottom: 4rem;
    scroll-margin-top: 130px;
}

.project-section-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    max-width: 900px;
    margin-bottom: 2rem;
}

.project-section-label h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-section-label h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #50254B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-section-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.project-section-content ul {
    list-style: none;
    margin-top: 1rem;
}

.project-section-content > ul:first-child {
    margin-top: 0;
}

.project-section-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.project-section-content li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #50254B;
}

/* Suppress the default arrow bullet inside decorative lists
   (.pipeline uses either name/description rows with no marker or
   an accent dot marker on the plain variant — both overridden
   further down with higher specificity where the dot is desired). */
.project-section-content .pipeline .pipeline-stage-items li::before {
    content: none;
}

.project-section-content .pipeline .pipeline-stage-items--plain li::before {
    content: '';
    position: absolute;
    left: 0.05rem;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #115e59;
    color: transparent;
}

/* Project Images */
.project-image {
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-light);
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image--hero {
    /* aspect-ratio removed to show full image */
}

.image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 2rem;
    text-align: center;
}

.project-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.project-images-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ================================
   PROTOTYPE BEFORE/AFTER CARDS
   ================================ */

.prototype-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.prototype-card {
    background: var(--bg);
    border: 1px solid var(--gray-light);
    border-radius: 12px;
    overflow: hidden;
}

.prototype-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
    background: rgba(92, 45, 92, 0.03);
}

.prototype-card-number {
    font-size: 0.8rem;
    font-weight: 700;
    color: #50254B;
    background: rgba(92, 45, 92, 0.1);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
}

.prototype-card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.prototype-card-content {
    padding: 1rem;
}

.prototype-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.prototype-before,
.prototype-after {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comparison-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    width: fit-content;
}

.prototype-before .comparison-label {
    color: #a10702;
    background: rgba(161, 7, 2, 0.1);
}

.prototype-after .comparison-label {
    color: #688e26;
    background: rgba(104, 142, 38, 0.1);
}

.comparison-image {
    border-radius: 8px;
    overflow: hidden;
}

.comparison-image:has(.image-placeholder) {
    background: var(--gray-light);
}

.comparison-image .image-placeholder {
    min-height: 150px;
    font-size: 0.85rem;
}

.comparison-image {
    overflow: hidden;
    border: 1px solid var(--gray-light);
    border-radius: 8px;
}

.comparison-image img {
    width: 100%;
    height: auto;
    display: block;
}

.prototype-before p,
.prototype-after p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Dark mode */
[data-theme="dark"] .prototype-card {
    border-color: var(--gray);
}

[data-theme="dark"] .prototype-card-header {
    background: rgba(92, 45, 92, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .prototype-comparison {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .prototype-card-header {
        padding: 1rem 1.25rem;
    }

    .prototype-card-content {
        padding: 1.25rem;
    }
}

/* ================================
   UX PRINCIPLES GRID
   ================================ */

.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

.principle-card {
    background: linear-gradient(145deg, #50254B 0%, #3D1A3D 100%);
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.principle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(80, 37, 75, 0.3);
}

.principle-icon {
    margin-bottom: 0.75rem;
    width: 40px;
    height: 40px;
    background: #FFD700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #50254B;
}

.principle-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.principle-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

/* Dark mode */
[data-theme="dark"] .principle-card {
    border: none;
}

/* ================================
   RECOMMENDATIONS GRID
   ================================ */

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.recommendation-card {
    background: #50254B;
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.recommendation-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 80px;
    height: 80px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.recommendation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(92, 45, 92, 0.3);
}

.recommendation-card:hover::before {
    transform: scale(1.5);
}

.recommendation-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.recommendation-tag--testing,
.recommendation-tag--analysis {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.recommendation-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #FFD700;
    margin-bottom: 0.5rem;
}

.recommendation-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0;
}

/* Dark mode */
[data-theme="dark"] .recommendation-card {
    border-color: var(--gray);
}

/* Responsive */
@media (max-width: 768px) {
    .principles-grid,
    .recommendations-grid {
        grid-template-columns: 1fr;
    }

    .prototype-card {
        flex-direction: column;
    }

    .prototype-card-side {
        min-width: auto;
    }

    .principle-card,
    .recommendation-card {
        padding: 1.25rem;
    }
}

@media (max-width: 600px) {
    .principles-grid,
    .recommendations-grid {
        gap: 1rem;
    }

    .principle-card h4,
    .recommendation-card h4 {
        font-size: 0.95rem;
    }

    .principle-card p,
    .recommendation-card p {
        font-size: 0.85rem;
    }
}

/* ================================
   PROJECT SIDEBAR / TOC
   ================================ */

/* Scroll to top button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: #50254B;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 98;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
}

/* Per-project accent color for the scroll-to-top button — inherits
   from the same hero variant scope as other project styles (nav,
   TOC, tags). Falls back to Minifigs purple for pages with no
   project hero. */
body:has(.project-hero-image--dna) .scroll-to-top {
    background: #115e59;
}

body:has(.project-hero-image--scanner) .scroll-to-top {
    background: #db2d3c;
}

body:has(.project-hero-image--symphera) .scroll-to-top {
    background: #3730a3;
}

body:has(.project-hero-image--vylet) .scroll-to-top {
    background: #2B5740;
}

body:has(.project-hero-image--hzm) .scroll-to-top {
    background: #5a0931;
}

/* Minifigs already uses #50254B as the default, no override needed. */

.project-layout {
    position: relative;
}

.project-sidebar {
    position: sticky;
    top: 53px;
    z-index: 99;
    background: var(--bg);
    border-bottom: 1px solid var(--gray-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.project-sidebar::-webkit-scrollbar {
    display: none;
}

.toc-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.toc-toggle-arrow {
    transition: transform 0.2s ease;
}

.project-toc {
    padding: 0;
}

.project-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 2rem;
    white-space: nowrap;
}

.project-toc li {
    margin: 0;
}

.project-toc a {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.project-toc a:hover {
    color: var(--text);
    background: var(--gray-light);
    border-left-color: transparent;
}

.project-toc a.active {
    color: #50254B;
    border-bottom-color: #50254B;
    font-weight: 500;
    border-left-color: transparent;
}

/* Results Stats */
.results-stats {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-light);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #50254B;
}

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

/* Per-project accent color for stat numbers — inherits from the
   same hero variant scope as other project styles. Falls back to
   Minifigs purple for pages with no project hero. */
body:has(.project-hero-image--dna) .stat-number {
    color: #115e59;
}

body:has(.project-hero-image--scanner) .stat-number {
    color: #db2d3c;
}

body:has(.project-hero-image--symphera) .stat-number {
    color: #3730a3;
}

body:has(.project-hero-image--vylet) .stat-number {
    color: #2B5740;
}

body:has(.project-hero-image--hzm) .stat-number {
    color: #5a0931;
}

/* Project Navigation */
.project-nav {
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border-top: 1px solid var(--gray-light);
}

.project-nav-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: color 0.3s;
}

.project-nav-link--next {
    text-align: right;
}

.project-nav-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.project-nav-title {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
}

.project-nav-link:hover .project-nav-title {
    color: var(--accent);
}

/* Make project-detail clickable */
a.project-detail {
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--gray-light);
    align-items: center;
    transition: background 0.3s;
}

a.project-detail:hover {
    background: rgba(232, 93, 59, 0.03);
}

a.project-detail:has(.project-detail-visual--minifigs) {
    padding: 2.5rem 2rem;
    border-radius: 16px;
}

a.project-detail:has(.project-detail-visual--minifigs):hover {
    background: rgba(255, 215, 0, 0.15);
}

/* Image-preview cards get a bold, full-color teal hover state.
   Whole card turns solid teal (#115e59), text inverts to white or
   light teal for contrast. Distinctive project-identity signal,
   avoids the AI-SaaS pastel-tint look. */
a.project-detail:has(.project-detail-visual--image) {
    transition: background 0.3s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
    border-radius: 12px;
    transform-origin: center;
}

a.project-detail:has(.project-detail-visual--image) .project-detail-title,
a.project-detail:has(.project-detail-visual--image) .project-detail-desc,
a.project-detail:has(.project-detail-visual--image) .project-detail-number,
a.project-detail:has(.project-detail-visual--image) .project-detail-tags span {
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* Horizontal padding gives the mockup + "02" number breathing room
   from the card edges. Outer footprint stays the same (padding is
   inset), so sibling cards align visually. */
a.project-detail:has(.project-detail-visual--image) {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Content column gets extra right padding so the title/description
   don't run flush against the "02" number absolutely-positioned in
   the top-right corner. Gives the number breathing room from text. */
a.project-detail:has(.project-detail-visual--image) .project-detail-content {
    padding-right: 4.5rem;
}

/* Focus state — mirrors the hover styling and adds a visible focus
   outline so keyboard users get the same visual affordance. */
a.project-detail:has(.project-detail-visual--image):focus-visible {
    background: #115e59;
    border-bottom-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px rgba(94, 234, 212, 0.55),
        0 6px 16px rgba(17, 94, 89, 0.16),
        0 16px 36px rgba(17, 94, 89, 0.14);
    outline: none;
}

a.project-detail:has(.project-detail-visual--image):focus-visible .project-detail-title { color: #ffffff; }
a.project-detail:has(.project-detail-visual--image):focus-visible .project-detail-desc { color: rgba(255, 255, 255, 0.9); }
a.project-detail:has(.project-detail-visual--image):focus-visible .project-detail-number { color: rgba(255, 255, 255, 0.22); }
a.project-detail:has(.project-detail-visual--image):focus-visible .project-detail-tags span {
    background: #ffffff;
    color: #115e59;
}
a.project-detail:has(.project-detail-visual--image):focus-visible .project-detail-preview {
    transform: scale(1.02);
    filter: grayscale(0%);
}

a.project-detail:has(.project-detail-visual--image):hover {
    background: #115e59;
    border-bottom-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        0 6px 16px rgba(17, 94, 89, 0.16),
        0 16px 36px rgba(17, 94, 89, 0.14);
}

a.project-detail:has(.project-detail-visual--image):hover .project-detail-title {
    color: #ffffff;
}

a.project-detail:has(.project-detail-visual--image):hover .project-detail-desc {
    color: rgba(255, 255, 255, 0.9);
}

a.project-detail:has(.project-detail-visual--image):hover .project-detail-number {
    color: rgba(255, 255, 255, 0.22);
}

/* Tags invert on hover — from teal fill with white text to white
   fill with teal text so they read against the dark card. */
a.project-detail:has(.project-detail-visual--image):hover .project-detail-tags span {
    background: #ffffff;
    color: #115e59;
}

a.project-detail:last-of-type {
    border-bottom: none;
}

/* Phone-image variant: card slot is designed for a portrait mockup
   (baked iPhone frame). The visual slot has a fixed height matching
   the standard card row so this phone card aligns with the abstract
   browser / phone-mock cards next to it — no taller-than-siblings
   dominance. Preview scales to fit within the slot, keeping aspect. */
.project-detail-visual--phone {
    max-width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-detail-visual--phone .project-detail-preview {
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

/* Scanner card hover — uses the scanner project's dark red
   (#7a1922 hero-base, derived from the app's actual UI) instead of
   bio's teal. Keeps the card identity aligned with the project hero. */
a.project-detail.project-detail--scanner:hover,
a.project-detail.project-detail--scanner:focus-visible {
    background: #7a1922;
}

a.project-detail.project-detail--scanner:focus-visible {
    box-shadow:
        0 0 0 3px rgba(245, 128, 143, 0.55),
        0 6px 16px rgba(61, 15, 20, 0.22),
        0 16px 36px rgba(61, 15, 20, 0.18);
    outline: none;
}

a.project-detail.project-detail--scanner:hover {
    box-shadow:
        0 6px 16px rgba(61, 15, 20, 0.22),
        0 16px 36px rgba(61, 15, 20, 0.18);
}

a.project-detail.project-detail--scanner:hover .project-detail-tags span,
a.project-detail.project-detail--scanner:focus-visible .project-detail-tags span {
    background: #ffffff;
    color: #7a1922;
}

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

@media (max-width: 1000px) {
    .projects {
        grid-template-columns: 1fr 1fr;
    }

    .project--large {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .project-detail {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-detail-visual {
        min-height: 150px;
    }

    .project-detail-number {
        position: static;
        font-size: 1rem;
        color: var(--accent);
        margin-bottom: 0.5rem;
        display: block;
    }

    .page-title {
        font-size: 2rem;
    }

    .about-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .photo-placeholder {
        margin: 0 auto;
        width: 150px;
        height: 150px;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-name {
        font-size: 2rem;
    }

    .project-section-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .project-hero-meta {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .project-hero-title {
        font-size: 2rem;
    }

    .project-images-grid,
    .project-images-grid--3 {
        grid-template-columns: 1fr;
    }

    .results-stats {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .project-nav {
        flex-direction: row;
        gap: 1rem;
    }

    .project-nav-link {
        flex: 1;
    }

    .project-nav-link--next {
        text-align: right;
    }

    a.project-detail {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .projects {
        grid-template-columns: 1fr;
        padding: 70px 1rem 1rem;
    }

    .nav {
        padding: 0.75rem 1rem;
    }

    .nav-right {
        display: none;
    }

    .project {
        padding: 1.5rem 1rem;
    }

    .page-header {
        padding: 100px 1rem 2rem;
    }

    .projects-list {
        padding: 0 1rem 3rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Project page mobile */
    .project-hero-image {
        margin-top: 50px;
    }

    .project-hero--below-image {
        padding: 1.5rem 1rem 1rem;
    }

    .project-hero--below-image .project-hero-title {
        font-size: 1.75rem;
    }

    .project-hero--below-image .project-hero-category {
        font-size: 0.85rem;
    }

    .project-hero {
        padding: 70px 1rem 1rem;
    }

    .project-hero-title {
        font-size: 1.5rem;
    }

    .project-hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

    .project-content {
        padding: 0 1rem 1.5rem;
    }

    .project-section {
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
    }

    .project-section-grid {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .meta-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .project-hero-meta {
        padding-top: 0.75rem;
        gap: 0.75rem;
    }

    .meta-item--full {
        padding-top: 0.75rem;
    }

    .project-images-grid {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        gap: 0.75rem;
    }

    .project-image--hero {
        margin-bottom: 0.75rem;
    }

    .project-section-content p {
        margin-bottom: 0.5rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .project-section-content ul {
        margin-top: 0.5rem;
    }
}

/* ========================================
   MINIFIGS PROJECT - HERO WITH FALLING BRICKS
   ======================================== */

.project-hero-image--minifigs {
    background: linear-gradient(135deg, #50254B 0%, #3D1A3D 100%);
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

.project-hero-image__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.project-hero-image__text {
    flex: 1;
    text-align: left;
}

.project-hero-image__content .project-hero-title {
    color: #FFD700;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    line-height: 1.1;
    white-space: pre-line;
}

.project-hero-image__content .project-hero-category {
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.project-hero-image__content img {
    flex-shrink: 0;
}

/* Navigation over minifigs hero */
body:has(.project-hero-image--minifigs) .nav {
    background: rgba(61, 26, 61, 0.95);
}

body:has(.project-hero-image--minifigs) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #50254B 0%, #3D1A3D 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

body:has(.project-hero-image--minifigs) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--minifigs) .nav a {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
}

body:has(.project-hero-image--minifigs) .nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* Extend purple background full width */
.project-hero-image--minifigs {
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
}


.project-hero-image--minifigs img {
    max-width: 700px;
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* When the minifigs hero has no image (dev/sync variant), the img normally
   dictates the container height. Without it the hero collapses to text height,
   so we give it an explicit min-height matching the UX diplomka proportions. */
.project-hero-image--minifigs:not(:has(img)) {
    min-height: 464px;
}

/* Project 5: Výlet hero */
.project-hero-image--vylet {
    background: linear-gradient(135deg, #2B5740 0%, #1A3D2A 100%);
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

body:has(.project-hero-image--vylet) .nav {
    background: rgba(26, 61, 42, 0.95);
}

body:has(.project-hero-image--vylet) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2B5740 0%, #1A3D2A 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

body:has(.project-hero-image--vylet) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--vylet) .nav a {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
}

body:has(.project-hero-image--vylet) .nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.project-hero-image--vylet .project-hero-title {
    color: #fff;
    font-size: 3.5rem;
    white-space: pre-line;
}

.project-hero-image--vylet .project-hero-category {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.contour-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.project-hero-image--vylet img {
    max-width: 220px;
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    margin-right: 10%;
}

/* Project 5: Výlet green color overrides */
body:has(.project-hero-image--vylet) .project-section-label h3 {
    color: #2B5740;
}

body:has(.project-hero-image--vylet) .stat-number {
    color: #FE7762;
}

body:has(.project-hero-image--vylet) .stat-label {
    border-bottom-color: #2B5740;
}

body:has(.project-hero-image--vylet) .scroll-to-top {
    background: #2B5740;
}

body:has(.project-hero-image--vylet) .project-nav-link:hover .project-nav-title {
    color: #2B5740;
}

body:has(.project-hero-image--vylet) .project-detail-number {
    color: #2B5740;
}

body:has(.project-hero-image--vylet) .recommendation-card {
    background: linear-gradient(145deg, #2B5740 0%, #1A3D2A 100%);
}

body:has(.project-hero-image--vylet) .principle-card {
    background: #2B5740;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

body:has(.project-hero-image--vylet) .principle-card:hover {
    background: #346849;
    box-shadow: 0 6px 14px rgba(43, 87, 64, 0.18);
    transform: translateY(-2px);
}

body:has(.project-hero-image--vylet) .principle-icon {
    background: #FE7762;
    color: #fff;
}

/* Compact 1-column stack — sits beside the storyboard in .decide-layout */
body:has(.project-hero-image--vylet) .principles-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin-top: 0;
    margin-bottom: 0;
    align-self: stretch;
}

/* Each card: icon left, text (title + description) right */
body:has(.project-hero-image--vylet) .principle-card {
    padding: 0.95rem 1.1rem;
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.25rem;
    align-items: start;
}

body:has(.project-hero-image--vylet) .principle-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    grid-row: 1 / span 2;
    align-self: center;
}

body:has(.project-hero-image--vylet) .principle-icon svg {
    width: 16px;
    height: 16px;
}

body:has(.project-hero-image--vylet) .principle-card h3 {
    font-size: 0.92rem;
    margin-bottom: 0;
    line-height: 1.25;
    grid-column: 2;
    grid-row: 1;
}

body:has(.project-hero-image--vylet) .principle-card p {
    font-size: 0.8rem;
    line-height: 1.4;
    grid-column: 2;
    grid-row: 2;
}

@media (max-width: 500px) {
    body:has(.project-hero-image--vylet) .principles-grid {
        grid-template-columns: 1fr;
    }
}

body:has(.project-hero-image--vylet) .project-sidebar {
    border-bottom-color: #2B5740;
}

body:has(.project-hero-image--vylet) .project-toc a.active {
    color: #2B5740;
    border-bottom-color: #2B5740;
}

/* DNA project: active TOC item takes on the teal accent (text +
   underline only, no background pill — same treatment as vylet). */
body:has(.project-hero-image--dna) .project-toc a.active {
    color: #115e59;
    border-bottom-color: #115e59;
}

/* Body strong emphasis — picks up the project accent so key phrases
   ("kompletní obraz proteinu" and similar) tie the whole page into
   one visual system with the meta box, TOC, and pipeline accents. */
body:has(.project-hero-image--dna) .project-section-content strong {
    color: #115e59;
}

/* DNA project: colored tech tags + meta labels, mirroring the pattern
   used by the vylet and hzm project pages (same teal accent as the
   TOC / hero gradient). Turns the plain grey tag pills into an accent-
   coloured strip that matches the hero identity. */
body:has(.project-hero-image--dna) .meta-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #115e59;
    letter-spacing: 0.07em;
}

body:has(.project-hero-image--dna) .method-tags span {
    background: #115e59 !important;
    color: #fff !important;
    font-weight: 600;
}

[data-theme="dark"] body:has(.project-hero-image--dna) .method-tags span {
    background: #115e59 !important;
    color: #fff !important;
}


/* Test iterations gallery — phone mockups with arrows between versions */
.iterations-gallery {
    margin: 2.25rem 0 0.5rem;
}

.iterations-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2B5740;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.iterations-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding: 0 0 1rem;
    width: 100%;
}

.iteration-step {
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.iteration-step:hover {
    transform: translateY(-10px);
}

.iteration-step .image-zoom {
    display: inline-block;
    width: auto;
}

.iteration-step img {
    height: 360px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.iteration-step figcaption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    text-align: center;
    color: #666;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.iteration-version {
    display: inline-block;
    font-weight: 700;
    color: #2B5740;
    margin-right: 0.35rem;
    letter-spacing: 0.04em;
}

.iteration-desc {
    font-weight: 400;
}

.iteration-arrow {
    flex: 0 0 auto;
    font-size: 1.6rem;
    color: #2B5740;
    font-weight: 600;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .iteration-step,
    .iteration-step:hover {
        transform: none;
        transition: none;
    }
}

@media (max-width: 700px) {
    .iterations-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .iteration-step img {
        height: 280px;
    }
    .iteration-arrow {
        transform: rotate(90deg);
    }
}

[data-theme="dark"] .iterations-title {
    color: #FE7762;
}

[data-theme="dark"] .iteration-step figcaption {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .iteration-version {
    color: #FE7762;
}

[data-theme="dark"] .iteration-arrow {
    color: #FE7762;
}

/* Decide layout — storyboard left + 4 function cards right (mirrors HMW layout) */
.decide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
    margin: 2rem 0 0.5rem;
}

@media (max-width: 820px) {
    .decide-layout {
        grid-template-columns: 1fr;
    }
}

/* Side note — used for trade-offs, asides within section content */
.project-aside {
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    background: rgba(43, 87, 64, 0.05);
    border-left: 3px solid rgba(43, 87, 64, 0.35);
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    color: #555;
    line-height: 1.55;
}

.project-aside em {
    color: #2B5740;
    font-style: italic;
    font-weight: 600;
}

[data-theme="dark"] .project-aside {
    background: rgba(254, 119, 98, 0.08);
    border-left-color: rgba(254, 119, 98, 0.4);
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .project-aside em {
    color: #FE7762;
}

/* Storyboard — user-test flow diagram, polaroid-styled like HMW photo */
.storyboard {
    margin: 1rem 0 0;
    padding: 0.7rem 0.7rem 1rem;
    background: #fafaf7;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16),
                0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    transform: rotate(0.8deg);
    position: relative;
    width: 100%;
    min-width: 0;
}

/* Scotch tape accent — same as HMW photo */
.storyboard::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(1.5deg);
    width: 80px;
    height: 18px;
    background: rgba(220, 200, 130, 0.55);
    border-left: 1px dashed rgba(160, 140, 80, 0.25);
    border-right: 1px dashed rgba(160, 140, 80, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 1;
}

.storyboard img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.storyboard figcaption {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}

.storyboard figcaption strong {
    color: #2B5740;
    font-style: normal;
    font-weight: 700;
}

[data-theme="dark"] .storyboard {
    background: #2a2a28;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.4),
                0 4px 10px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .storyboard figcaption { color: #aaa; }
[data-theme="dark"] .storyboard figcaption strong { color: #FE7762; }

/* Storyboard zoom button — wraps image, shows hint, opens lightbox */
.image-zoom {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}

.image-zoom:focus-visible {
    outline: 2px solid #2B5740;
    outline-offset: 4px;
}

/* Zoom hint — small circular icon in top-right corner of image */
.image-zoom-hint {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2B5740;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 2;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.image-zoom:hover ~ .image-zoom-hint,
.image-zoom:focus-visible ~ .image-zoom-hint {
    background: #FE7762;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(254, 119, 98, 0.4);
}

[data-theme="dark"] .image-zoom-hint {
    background: #FE7762;
}

/* Storyboard lightbox modal */
.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 25, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.image-lightbox-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 95vw;
}

.image-lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: zoom-in;
    border-radius: 4px;
}

.image-lightbox.has-caption .image-lightbox-stage img {
    max-height: 80vh;
}

.image-lightbox.is-open img {
    transform: scale(1);
}

.image-lightbox.is-open.is-zoomed img {
    transform: scale(2.4);
    cursor: zoom-out;
    transition: transform 0.25s ease;
}

/* Browser-chrome wrapper inside the lightbox — hidden by default,
   shown only when the source figure has a .browser-frame (via
   .has-browser-frame class on the lightbox). The frame + img are
   held inside .image-lightbox-frame so they share border-radius. */
.image-lightbox-frame {
    display: contents;
}

.image-lightbox.has-browser-frame .image-lightbox-frame {
    display: inline-flex;
    flex-direction: column;
    max-width: 95vw;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-lightbox.has-browser-frame.is-open .image-lightbox-frame {
    transform: scale(1);
}

.image-lightbox.has-browser-frame.has-caption .image-lightbox-frame {
    max-height: 80vh;
}

.image-lightbox-browser-bar {
    display: none;
}

.image-lightbox.has-browser-frame .image-lightbox-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(180deg, #f7f8fa 0%, #eaebee 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.image-lightbox-browser-dots {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.image-lightbox-browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.78rem;
    color: #475569;
    letter-spacing: 0.01em;
    max-width: 34rem;
    margin: 0 auto;
}

.image-lightbox.has-browser-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 3.5rem);
    width: auto;
    height: auto;
    filter: none;
    transform: none;
    border-radius: 0;
    cursor: default;
    object-fit: contain;
}

/* Caption — shown beneath image for figures with figcaption */
.image-lightbox-caption {
    display: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    text-align: center;
    max-width: 700px;
    line-height: 1.5;
    padding: 0 1rem;
}

.image-lightbox.has-caption .image-lightbox-caption {
    display: block;
}

.image-lightbox-caption strong {
    color: #fff;
    font-weight: 700;
}

.image-lightbox-caption .iteration-version {
    color: #FE7762;
    margin-right: 0.4rem;
    font-weight: 700;
}

.image-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* Gallery navigation arrows — only visible when lightbox has multiple images */
.image-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 0 0.25rem;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

.image-lightbox.has-nav .image-lightbox-nav {
    display: flex;
}

.image-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.image-lightbox-prev {
    left: 1.5rem;
}

.image-lightbox-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.image-lightbox-next {
    right: 1.5rem;
}

.image-lightbox-next:hover {
    transform: translateY(-50%) translateX(3px);
}

@media (max-width: 600px) {
    .image-lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
    }
    .image-zoom-hint {
        width: 32px;
        height: 32px;
        top: 0.9rem;
        right: 0.9rem;
    }
    .image-lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }
    .image-lightbox-prev { left: 0.5rem; }
    .image-lightbox-next { right: 0.5rem; }
}

/* HMW artifact — real sprint photo + winner callouts (side-by-side) */
.hmw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
    margin: 2rem 0 0.5rem;
}

/* User journey block — sits below HMW layout, derived from winners */
.map-journey {
    margin-top: 3.5rem;
}

.user-journey {
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.journey-step {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    position: relative;
}

.journey-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: #2B5740;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.journey-step-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2B5740;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.journey-step p {
    margin: 0;
    color: #555;
    font-size: 0.85rem;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .user-journey {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

[data-theme="dark"] .journey-step {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(254, 119, 98, 0.22);
}

[data-theme="dark"] .journey-step:hover {
    border-color: rgba(254, 119, 98, 0.45);
}

[data-theme="dark"] .journey-step-num {
    background: #FE7762;
    color: #1a1a1a;
}

[data-theme="dark"] .journey-step h4 {
    color: #FE7762;
}

[data-theme="dark"] .journey-step p {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 700px) {
    .user-journey {
        grid-template-columns: 1fr;
    }
}

/* Polaroid-style frame — feels like a deliberate design artifact, not a snapshot */
.hmw-photo {
    margin: 1rem 0 0;
    padding: 0.7rem 0.7rem 1rem;
    background: #fafaf7;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16),
                0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    transform: rotate(-1.2deg);
    position: relative;
    min-width: 0;
}

/* Subtle "scotch tape" accent at the top */
.hmw-photo::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 70px;
    height: 18px;
    background: rgba(220, 200, 130, 0.55);
    border-left: 1px dashed rgba(160, 140, 80, 0.25);
    border-right: 1px dashed rgba(160, 140, 80, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 1;
}

.hmw-photo img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    display: block;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
}

.hmw-photo figcaption {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* Crazy 8s — side-by-side: polaroid left, text right (matches HMW + Decide) */
.crazy8-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    margin: 2rem 0 0.5rem;
}

@media (max-width: 820px) {
    .crazy8-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Notebook page — torn from a sprint book, real paper feel */
.crazy8-card {
    --margin-color: rgba(254, 119, 98, 0.55);
    --paper-color: #fdf9ec;
    --paper-shade: #f5efd9;
    --paper-shade-2: #ede5c9;

    margin: 0;
    padding: 1.5rem 1.6rem 1.6rem 3.2rem;
    color: #1a1a1a;
    background:
        /* Vertical red margin line */
        linear-gradient(
            to right,
            transparent 0,
            transparent calc(2.4rem - 1px),
            var(--margin-color) calc(2.4rem - 1px),
            var(--margin-color) calc(2.4rem + 1px),
            transparent calc(2.4rem + 1px)
        ),
        /* Soft paper vignette — like real paper grain */
        radial-gradient(
            ellipse at 25% 20%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 55%
        ),
        /* Subtle warm gradient — corner shading */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.3) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.025) 100%
        ),
        var(--paper-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    box-shadow:
        /* Subtle inner top highlight — paper edge catching light */
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        /* Close shadow */
        0 1px 1px rgba(0, 0, 0, 0.05),
        /* Stacked pages underneath — sheets of the sprint book */
        2px 3px 0 -1px var(--paper-shade),
        3px 4px 0 -1px rgba(0, 0, 0, 0.08),
        5px 6px 0 -2px var(--paper-shade-2),
        6px 7px 0 -2px rgba(0, 0, 0, 0.06),
        /* Ambient shadow */
        0 12px 24px -6px rgba(0, 0, 0, 0.18),
        0 24px 48px -16px rgba(0, 0, 0, 0.14);
    transform: rotate(-0.6deg);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    position: relative;
}

/* Curled bottom-right corner — paper-lifting effect */
.crazy8-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(0, 0, 0, 0.08) 50.5%,
        rgba(0, 0, 0, 0.18) 100%
    );
    pointer-events: none;
    border-bottom-right-radius: 2px;
}

.crazy8-card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 1px rgba(0, 0, 0, 0.05),
        2px 3px 0 -1px var(--paper-shade),
        3px 4px 0 -1px rgba(0, 0, 0, 0.08),
        5px 6px 0 -2px var(--paper-shade-2),
        6px 7px 0 -2px rgba(0, 0, 0, 0.06),
        0 18px 36px -6px rgba(0, 0, 0, 0.22),
        0 32px 60px -16px rgba(0, 0, 0, 0.16);
}

.crazy8-eyebrow {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-size: 1.05rem;
    font-weight: 600;
    color: #FE7762;
    letter-spacing: 0.02em;
    margin-bottom: 0;
    line-height: 1.2;
}

.crazy8-heading {
    font-family: 'Caveat', cursive;
    font-size: 2.4rem;
    font-weight: 700;
    color: #2B5740;
    letter-spacing: -0.005em;
    margin: 0 0 1rem;
    line-height: 1;
}

/* Lined writing area — lines drawn at exact baseline of each text line */
.crazy8-lined {
    --line-spacing: 28px;
    --line-color: rgba(43, 87, 64, 0.18);
    --text-size: 0.92rem;

    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--line-spacing) - 1px),
        var(--line-color) calc(var(--line-spacing) - 1px),
        var(--line-color) var(--line-spacing)
    );
    background-position: 0 0;
    background-size: 100% var(--line-spacing);
    padding-top: 0;
}

.crazy8-lined p {
    margin: 0;
    line-height: 28px;
    color: #2a2a2a;
    font-size: var(--text-size);
}

.crazy8-lined p strong {
    color: #1a1a1a;
    font-weight: 700;
}

/* Stat — also snaps to 28px line rhythm (2 lines = 56px) */
.crazy8-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 56px;
    margin-top: 28px;
}

.crazy8-stat-number {
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    font-weight: 700;
    color: #FE7762;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transform: rotate(-2deg);
    display: inline-block;
}

.crazy8-stat-label {
    font-size: 0.8rem;
    color: #3a3a3a;
    line-height: 1.35;
}

.crazy8-stat-label em {
    font-style: italic;
    color: #666;
    font-size: 0.76rem;
}

.crazy8-photo {
    margin: 0;
    transform: rotate(0.6deg);
    width: 100%;
}

.crazy8-photo img {
    max-height: none;
}

/* Post-it stays peach in dark mode — it's meant to read as paper artifact */

.hmw-winners {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
}

.hmw-winners-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2B5740;
    margin: 0 0 0.5rem;
}

.hmw-winners-title span {
    font-weight: 500;
    color: #888;
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 0.78rem;
}


/* Sticky-note styled winner cards — visual link to the photo */
.hmw-winner {
    --note-color: #f0e683;
    --note-shade: rgba(0, 0, 0, 0.08);
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
    color: #1a1a1a;
    border: none;
    border-radius: 2px 2px 1px 1px;
    background:
        /* Glue strip — slightly darker top band like real post-its */
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.07) 0%,
            rgba(0, 0, 0, 0.02) 14%,
            rgba(0, 0, 0, 0) 22%
        ),
        /* Soft paper vignette */
        radial-gradient(
            ellipse at 30% 30%,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 60%
        ),
        var(--note-color);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.06),
        0 6px 10px -2px rgba(0, 0, 0, 0.14),
        0 16px 28px -8px rgba(0, 0, 0, 0.12);
    transform: rotate(-1.4deg);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
}

/* Curled bottom-right corner — subtle paper-lifting effect */
.hmw-winner::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 50.5%,
        rgba(0, 0, 0, 0.18) 100%
    );
    pointer-events: none;
    border-bottom-right-radius: 1px;
}

.hmw-winner:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.06),
        0 12px 18px -2px rgba(0, 0, 0, 0.18),
        0 24px 40px -10px rgba(0, 0, 0, 0.14);
    z-index: 2;
}

/* First place — slightly bigger than runners, content-fit */
.hmw-winner--first {
    --note-color: #ede067;
    padding: 1.1rem 1.2rem 1.2rem;
    transform: rotate(-2.5deg);
    margin: 0.5rem auto 0.6rem;
    width: 100%;
    max-width: 195px;
    aspect-ratio: 6 / 5;
}

.hmw-winner--first::after {
    width: 16px;
    height: 16px;
}

.hmw-winner--first p {
    font-size: 0.92rem;
    font-weight: 600;
}


.hmw-winner-rank {
    display: inline-block;
    background: #1a1a1a;
    color: #ede067;
    padding: 0.22rem 0.65rem;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    transform: rotate(-3deg);
}

/* Three runners-up — 3 squares in a row, podium feel */
.hmw-runners {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.hmw-runners-label {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.1rem;
    padding-left: 0.2rem;
}

.hmw-runners .hmw-winner {
    aspect-ratio: 1 / 1;
    padding: 0.65rem 0.75rem 0.75rem;
}

.hmw-runners .hmw-winner:nth-child(2) { transform: rotate(1.5deg);  --note-color: #f3eb8e; }
.hmw-runners .hmw-winner:nth-child(3) { transform: rotate(-0.7deg); --note-color: #ece375; }
.hmw-runners .hmw-winner:nth-child(4) { transform: rotate(1.8deg);  --note-color: #f5ee9c; }

.hmw-runners .hmw-winner:hover {
    transform: rotate(0deg) translateY(-4px);
}

.hmw-runners .hmw-winner p {
    font-size: 0.76rem;
    line-height: 1.3;
}

.hmw-runners .hmw-winner-label {
    font-size: 0.62rem;
    margin-bottom: 0.3rem;
    gap: 0.35rem;
}

.hmw-runners .hmw-winner-dots {
    font-size: 0.85rem;
}

.hmw-winner-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
    opacity: 0.85;
}

.hmw-winner-dots {
    color: #c8331f;
    letter-spacing: 0.12em;
    font-size: 1.05rem;
    line-height: 1;
    text-shadow:
        0 0 0.5px rgba(0, 0, 0, 0.3),
        0 1px 1px rgba(0, 0, 0, 0.18);
}

.hmw-winner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
    color: #1a1a1a;
}

@media (max-width: 820px) {
    .hmw-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .hmw-photo img {
        max-height: 60vh;
    }
}

[data-theme="dark"] .hmw-photo {
    background: #2a2a28;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.4),
                0 4px 10px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .hmw-photo figcaption { color: #aaa; }
[data-theme="dark"] .hmw-winners-title { color: #FE7762; }
[data-theme="dark"] .hmw-winners-title span { color: #888; }
[data-theme="dark"] .hmw-runners-label { color: #888; }
/* Sticky notes stay yellow in dark mode — they're meant to read as paper */

.vylet-mockups {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 0 2rem;
    margin-top: -1rem;
    width: 100%;
}

.vylet-mockup-item {
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 320px;
    position: relative;
    padding: 0;
    cursor: default;
    outline: none;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.vylet-mockup-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.vylet-mockups .vylet-mockup-item:nth-child(1) { transition-delay: 0s; }
.vylet-mockups .vylet-mockup-item:nth-child(2) { transition-delay: 0.1s; }
.vylet-mockups .vylet-mockup-item:nth-child(3) { transition-delay: 0.2s; }
.vylet-mockups .vylet-mockup-item:nth-child(4) { transition-delay: 0.3s; }

.vylet-mockup-item:focus-visible {
    outline: 2px solid #FE7762;
    outline-offset: 4px;
    border-radius: 8px;
}

.vylet-mockup-phone {
    position: relative;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.vylet-mockup-item:hover .vylet-mockup-phone {
    transform: translateY(-10px);
}

.vylet-mockup-phone img {
    height: 360px;
    transition: filter 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vylet-mockup-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .vylet-mockup-item .vylet-mockup-phone,
    .vylet-mockup-item:hover .vylet-mockup-phone {
        transform: none;
        transition: none;
    }
}

/* Feature keywords — hidden on page, read by JS for lightbox */
.mockup-features-text {
    display: none;
}

/* Image lightbox modal */
.mockup-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.mockup-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.mockup-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.mockup-lightbox-stage {
    flex-shrink: 0;
}

.mockup-lightbox img {
    max-height: 85vh;
    max-width: 50vw;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mockup-lightbox.is-open img {
    transform: scale(1);
}

.mockup-lightbox-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 320px;
    color: #fff;
}

.mockup-lightbox-caption {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.mockup-lightbox-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mockup-lightbox-features li {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0.9rem;
    background: rgba(254, 119, 98, 0.18);
    border-left: 3px solid #FE7762;
    border-radius: 0 6px 6px 0;
    line-height: 1.35;
}

.mockup-lightbox-counter {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
}

/* Mobile: stack vertically in lightbox */
@media (max-width: 820px) {
    .mockup-lightbox-content {
        flex-direction: column;
        gap: 1.5rem;
    }
    .mockup-lightbox img {
        max-height: 55vh;
        max-width: 80vw;
    }
    .mockup-lightbox-info {
        max-width: 80vw;
        align-items: center;
        text-align: center;
    }
    .mockup-lightbox-features {
        width: 100%;
    }
}

/* Stacked variant — pro mockupy bez feature listu (např. scanner).
   Info blok se umístí pod obrázek jako podtitul, ne vedle. Toggle přes
   .is-stacked class, kterou setupMockupToggle nastavuje podle toho,
   jestli daný mockup má feature list nebo ne. */
.mockup-lightbox.is-stacked .mockup-lightbox-content {
    flex-direction: column;
    gap: 1.25rem;
}

.mockup-lightbox.is-stacked .mockup-lightbox img {
    max-height: 72vh;
    max-width: 45vw;
}

.mockup-lightbox.is-stacked .mockup-lightbox-info {
    max-width: 640px;
    align-items: center;
    text-align: center;
}

.mockup-lightbox.is-stacked .mockup-lightbox-caption {
    font-size: 1.1rem;
    font-weight: 500;
}

@media (max-width: 820px) {
    .mockup-lightbox.is-stacked .mockup-lightbox img {
        max-width: 80vw;
    }
}

/* Landscape variant — MacBook mockupy potřebují víc horizontálního
   prostoru. Selector `.mockup-lightbox.is-landscape img` má specificity
   (0,2,1) což přebijí base `.mockup-lightbox img` (0,1,1). */
.mockup-lightbox.is-landscape img {
    max-width: 92vw;
    max-height: 82vh;
}

.mockup-lightbox.is-landscape .mockup-lightbox-content {
    max-width: 96vw;
    max-height: 92vh;
}

@media (max-width: 820px) {
    .mockup-lightbox.is-landscape img {
        max-width: 94vw;
        max-height: 65vh;
    }
}

/* Zoom mode: klik na obrázek přepne mezi fit-to-screen a 2.2× zoomem.
   Transform-origin sleduje kurzor (nastavené přes --zoom-x/--zoom-y
   custom properties z JS), takže obraz se pohybuje přirozeně
   podle pozice myši — žádné drag needed. */
.mockup-lightbox img {
    cursor: zoom-in;
}

.mockup-lightbox.is-zoomed img {
    cursor: zoom-out;
    transform: scale(2.4);
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform 0.25s ease, transform-origin 0.08s linear;
}

.mockup-lightbox-close,
.mockup-lightbox-nav {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mockup-lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
}

.mockup-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.mockup-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2rem;
    line-height: 1;
}

.mockup-lightbox-prev {
    left: 1.5rem;
}

.mockup-lightbox-next {
    right: 1.5rem;
}

.mockup-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 600px) {
    .mockup-lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 1.6rem;
    }
    .mockup-lightbox-prev { left: 0.5rem; }
    .mockup-lightbox-next { right: 0.5rem; }
}

/* Mobile / no-hover fallback — stack vertically, show all labels */
@media (hover: none), (max-width: 768px) {
    .vylet-mockups {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    .vylet-mockup-item,
    .vylet-mockups:has(.vylet-mockup-item:hover) .vylet-mockup-item:not(:hover),
    .vylet-mockup-item:hover {
        flex: initial;
        width: 100%;
        max-width: 500px;
    }
    .vylet-mockup-phone img,
    .vylet-mockup-item:hover .vylet-mockup-phone img,
    .vylet-mockups:has(.vylet-mockup-item:hover) .vylet-mockup-item:not(:hover) .vylet-mockup-phone img {
        height: 360px;
        filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
    }
    .mockup-marker {
        opacity: 1;
        transition: none;
    }
}

.vylet-mockup-phone {
    display: inline-block;
    position: relative;
}

.vylet-mockup-phone img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

.vylet-mockup-item:hover .vylet-mockup-phone img {
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.14));
}

.project-image-caption {
    font-size: 0.95rem;
    color: #2B5740;
    margin-top: 0.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

[data-theme="dark"] .project-image-caption {
    color: #FE7762;
}

/* Old list removed — labels are now inline in the markers */

.mockup-features li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #2B5740;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Falling bricks container */
.falling-bricks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Individual brick styling */
.brick {
    position: absolute;
    width: 30px;
    height: 20px;
    background: #FFD700;
    border-radius: 3px;
    opacity: 0;
    animation: fall linear infinite backwards;
    transition: translate 0.3s ease-out;
}

.brick::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: inherit;
    border-radius: 2px;
}

/* Different brick colors and positions */
/* Uniform duration + evenly spaced negative delays = constant brick density on screen */
.brick-1 { left: 73%; background: #FFD700; animation-duration: 30s; animation-delay: -0.8s; width: 25px; height: 16px; }
.brick-2 { left: 12%; background: #E85D3B; animation-duration: 30s; animation-delay: -1.6s; width: 35px; height: 22px; }
.brick-3 { left: 88%; background: #4CAF50; animation-duration: 30s; animation-delay: -2.4s; width: 28px; height: 18px; }
.brick-4 { left: 41%; background: #2196F3; animation-duration: 30s; animation-delay: -3.2s; width: 32px; height: 20px; }
.brick-5 { left: 6%; background: #FF5722; animation-duration: 30s; animation-delay: -3.9s; width: 26px; height: 17px; }
.brick-6 { left: 55%; background: #9C27B0; animation-duration: 30s; animation-delay: -4.7s; width: 30px; height: 19px; }
.brick-7 { left: 28%; background: #00BCD4; animation-duration: 30s; animation-delay: -5.5s; width: 34px; height: 21px; }
.brick-8 { left: 82%; background: #FFEB3B; animation-duration: 30s; animation-delay: -6.3s; width: 27px; height: 17px; }
.brick-9 { left: 47%; background: #E91E63; animation-duration: 30s; animation-delay: -7.1s; width: 31px; height: 20px; }
.brick-10 { left: 18%; background: #8BC34A; animation-duration: 30s; animation-delay: -7.9s; width: 29px; height: 18px; }
.brick-11 { left: 65%; background: #FF9800; animation-duration: 30s; animation-delay: -8.7s; width: 33px; height: 21px; }
.brick-12 { left: 35%; background: #3F51B5; animation-duration: 30s; animation-delay: -9.5s; width: 28px; height: 18px; }
.brick-13 { left: 92%; background: #FF4081; animation-duration: 30s; animation-delay: -10.3s; width: 30px; height: 19px; }
.brick-14 { left: 8%; background: #00E676; animation-duration: 30s; animation-delay: -11.1s; width: 26px; height: 17px; }
.brick-15 { left: 58%; background: #FFD700; animation-duration: 30s; animation-delay: -11.8s; width: 32px; height: 20px; }
.brick-16 { left: 22%; background: #E85D3B; animation-duration: 30s; animation-delay: -12.6s; width: 28px; height: 18px; }
.brick-17 { left: 78%; background: #2196F3; animation-duration: 30s; animation-delay: -13.4s; width: 24px; height: 15px; }
.brick-18 { left: 50%; background: #9C27B0; animation-duration: 30s; animation-delay: -14.2s; width: 33px; height: 21px; }
.brick-19 { left: 3%; background: #FFD700; animation-duration: 30s; animation-delay: -15s; width: 28px; height: 18px; }
.brick-20 { left: 15%; background: #E91E63; animation-duration: 30s; animation-delay: -15.8s; width: 25px; height: 16px; }
.brick-21 { left: 25%; background: #00BCD4; animation-duration: 30s; animation-delay: -16.6s; width: 32px; height: 20px; }
.brick-22 { left: 38%; background: #FF5722; animation-duration: 30s; animation-delay: -17.4s; width: 27px; height: 17px; }
.brick-23 { left: 44%; background: #8BC34A; animation-duration: 30s; animation-delay: -18.2s; width: 30px; height: 19px; }
.brick-24 { left: 52%; background: #FF9800; animation-duration: 30s; animation-delay: -18.9s; width: 26px; height: 17px; }
.brick-25 { left: 60%; background: #3F51B5; animation-duration: 30s; animation-delay: -19.7s; width: 31px; height: 20px; }
.brick-26 { left: 68%; background: #FF4081; animation-duration: 30s; animation-delay: -20.5s; width: 29px; height: 18px; }
.brick-27 { left: 75%; background: #00E676; animation-duration: 30s; animation-delay: -21.3s; width: 34px; height: 22px; }
.brick-28 { left: 85%; background: #FFEB3B; animation-duration: 30s; animation-delay: -22.1s; width: 27px; height: 17px; }
.brick-29 { left: 95%; background: #9C27B0; animation-duration: 30s; animation-delay: -22.9s; width: 25px; height: 16px; }
.brick-30 { left: 10%; background: #4CAF50; animation-duration: 30s; animation-delay: -23.7s; width: 33px; height: 21px; }
.brick-31 { left: 30%; background: #2196F3; animation-duration: 30s; animation-delay: -24.5s; width: 28px; height: 18px; }
.brick-32 { left: 45%; background: #E85D3B; animation-duration: 30s; animation-delay: -25.3s; width: 26px; height: 16px; }
.brick-33 { left: 62%; background: #FFD700; animation-duration: 30s; animation-delay: -26.1s; width: 32px; height: 20px; }
.brick-34 { left: 72%; background: #E91E63; animation-duration: 30s; animation-delay: -26.8s; width: 24px; height: 15px; }
.brick-35 { left: 80%; background: #8BC34A; animation-duration: 30s; animation-delay: -27.6s; width: 31px; height: 20px; }
.brick-36 { left: 90%; background: #FF9800; animation-duration: 30s; animation-delay: -28.4s; width: 28px; height: 18px; }
.brick-37 { left: 20%; background: #00BCD4; animation-duration: 30s; animation-delay: -29.2s; width: 30px; height: 19px; }
.brick-38 { left: 48%; background: #3F51B5; animation-duration: 30s; animation-delay: -30s; width: 26px; height: 17px; }

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) rotate(360deg);
        opacity: 0.6;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .project-hero-image--minifigs {
        padding: 1rem 1rem;
        padding-top: calc(50px + 0.5rem);
    }

    .project-hero-image--minifigs {
        margin-left: 0;
        padding-left: 1rem;
        width: 100%;
    }

    .toc-toggle {
        display: flex;
    }

    .project-toc ul {
        display: none;
        flex-direction: column;
        padding: 0 1rem 0.75rem;
        gap: 0;
    }

    .project-toc.toc-open ul {
        display: flex;
    }

    .project-toc.toc-open .toc-toggle-arrow {
        transform: rotate(180deg);
    }

    .project-toc a {
        padding: 0.5rem 0.75rem;
        border-bottom: none;
        border-radius: 6px;
    }

    .project-toc a.active {
        background: rgba(80, 37, 75, 0.08);
        border-bottom-color: transparent;
    }

    .project-hero-image__content {
        flex-direction: column;
        text-align: center;
    }

    .project-hero-image__text {
        text-align: center;
    }

    .project-hero-image__content .project-hero-title {
        font-size: 2rem;
    }

    .project-hero-image--minifigs img {
        max-height: 280px;
    }

    .brick {
        width: 20px;
        height: 14px;
    }

    .brick::before {
        width: 8px;
        height: 4px;
        top: -4px;
    }
}

@media (max-width: 480px) {
    .project-hero-image--minifigs {
        padding: 0.5rem 1rem;
        padding-top: calc(50px + 0.5rem);
    }

    .project-hero-image__content .project-hero-title {
        font-size: 1.5rem;
    }

    .project-hero-image--minifigs img {
        max-height: 220px;
    }
}

/* =========================================================
   Project 6 — Holky z marketingu (HZM)
   Palette:
   - Burgundy   #5a0931  — single content accent (text, structure, icons, badges)
   - Pink rose  #E091BA  — dark-mode burgundy equivalent (meta-label, cite, journey-num)
   - Pink       #FF8DF4  — hero pebbles only (brand confetti, kept in hero SVGs)
   - Lavender   #838EF9  — hero pebbles only (brand confetti, kept in hero SVGs)
   - Soft pink  #fde4ee  — page background + card surfaces (warm neutral)
   - Cream      #fffbee  — hero gradient top + hero hill blob (kept for hero only)
   ========================================================= */

.project-hero-image--hzm {
    background: linear-gradient(180deg, #fffbee 0%, #fde4ee 25%, #fde4ee 100%);
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    /* Match the visual height of --vylet / --minifigs which is dictated
       by their hero image (~350px max-height) plus padding. */
    height: 460px;
    box-sizing: border-box;
}

/* Decorative soft "hill" shape — mimics rounded hero shape on client site */
.project-hero-image--hzm::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 30%;
    width: 60%;
    height: 80%;
    background: #fffbee;
    border-radius: 50% 50% 8% 8% / 80% 80% 12% 12%;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

body:has(.project-hero-image--hzm) .nav {
    background: rgba(245, 212, 221, 0.95);
}

body:has(.project-hero-image--hzm) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f5d4dd;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

body:has(.project-hero-image--hzm) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--hzm) .nav a {
    color: #5a0931;
    background: rgba(90, 9, 49, 0.06);
}

body:has(.project-hero-image--hzm) .nav a:hover {
    color: #5a0931;
    background: rgba(90, 9, 49, 0.14);
}

body:has(.project-hero-image--hzm) .nav-back {
    color: #5a0931;
}

.project-hero-image--hzm .project-hero-title {
    color: #5a0931;
    font-size: 3.5rem;
    white-space: pre-line;
}

.project-hero-image--hzm .project-hero-category {
    color: rgba(90, 9, 49, 0.7);
    font-size: 0.9rem;
}

/* Hero brand shapes — magnetic repulsion (--tx/--ty set per-frame by JS) */
.hzm-shape {
    position: absolute;
    z-index: 2;
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
    will-change: transform;
}

/* HZM brand vocabulary — pebbles + bars from dot.svg & Group-2.svg
   (#) logo paths, scattered across the hero. */

/* Container — overlays the whole hero, behind the text */
.hzm-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

svg.hzm-shape {
    position: absolute;
    display: block;
    overflow: visible;
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
    will-change: transform;
    filter: saturate(0.72);
}

/* Pebble & bar base sizing — individual positions override placement only */
.hzm-shape--pebble { width: 48px; height: 48px; }
.hzm-shape--bar-v { width: 56px; height: 200px; }
.hzm-shape--bar-h { width: 220px; height: 36px; }

/* Scattered positions — sparse confetti across the whole hero, with bigger
   pieces on the right and small accents drifting toward the title side. */
/* Confetti — organic scatter, no grid. Variable spacing & sizes.
   Some pieces close-ish (pairs/triples), others isolated, big chunks
   anchoring the corners. */

/* Top zone — big anchor + tiny pepper */
.hzm-pos-1  { top: 4%;    right: 8%;   width: 90px;  height: 90px;  --rot: -18deg; }  /* dark-green — top right anchor */
.hzm-pos-2  { top: 22%;   right: 2%;   width: 16px;  height: 16px;  --rot: 22deg;  }  /* lavender — micro far right */
.hzm-pos-3  { top: 10%;   right: 30%;  width: 56px;  height: 56px;  --rot: -12deg; }  /* lavender — medium-large, top */
.hzm-pos-4  { top: 4%;    right: 50%;  width: 12px;  height: 12px;  --rot: 14deg;  }  /* lime — micro */

/* Upper-middle zone — biggest piece in the field
   NB: text-safe rule — keep circles OUT of the title text rect
   (roughly left 4–56%, top 22–80%). Anchors live in the corners/right band.
   Size mix targets: BIG anchors (60–120px) + MEDIUM (35–55px) + small/micro accents. */
.hzm-pos-5  { top: 52%;   right: 20%;  width: 28px;  height: 28px;  --rot: 8deg;   }  /* pink — small */
.hzm-pos-9  { top: 32%;   right: 8%;   width: 120px; height: 120px; --rot: -20deg; }  /* pink — BIG right-side anchor */
.hzm-pos-11 { top: 16%;   right: 44%;  width: 18px;  height: 18px;  --rot: 18deg;  }  /* lime — micro, top band */

/* Middle zone */
.hzm-pos-12 { top: 62%;   right: 4%;   width: 64px;  height: 64px;  --rot: -10deg; }  /* dark-green — right edge mid */
.hzm-pos-13 { top: 86%;   right: 14%;  width: 30px;  height: 30px;  --rot: 26deg;  }  /* pink — small, below logo */

/* Lower-middle zone */
.hzm-pos-14 { top: 44%;   right: 26%;  width: 32px;  height: 32px;  --rot: 6deg;   }  /* lavender — small */
.hzm-pos-15 { top: 10%;   right: 18%;  width: 22px;  height: 22px;  --rot: -16deg; }  /* dark-green — micro-small */
.hzm-pos-18 { top: 14%;   right: 56%;  width: 30px;  height: 30px;  --rot: -22deg; }  /* dark-green — small, top band */
.hzm-pos-19 { top: 72%;   right: 36%;  width: 46px;  height: 46px;  --rot: 10deg;  }  /* lime — medium, right of logo */

/* Bottom zone */
.hzm-pos-20 { bottom: 4%;  right: 64%;  width: 40px;  height: 40px;  --rot: -8deg;  }  /* lime — medium, bottom band */
.hzm-pos-21 { bottom: 6%;  right: 22%;  width: 80px;  height: 80px;  --rot: 16deg;  }  /* lavender — bottom-right anchor */
.hzm-pos-22 { bottom: 4%;  right: 42%;  width: 26px;  height: 26px;  --rot: -14deg; }  /* lime — small, bottom */
.hzm-pos-23 { bottom: 2%;  right: 4%;   width: 60px;  height: 60px;  --rot: 24deg;  }  /* pink — bottom-right anchor */
.hzm-pos-24 { top: 56%;    right: 30%;  width: 32px;  height: 32px;  --rot: -26deg; }  /* pink — small, right band */

/* Bars (parallelograms from # logo) — anchored on the right */
.hzm-pos-6 { top: -6%;    right: 22%;  width: 36px;  height: 140px; --rot: 8deg;   }  /* dark-green vertical */
.hzm-pos-7 { bottom: 24%; right: -4%;  width: 130px; height: 22px;  --rot: -6deg;  }  /* lime horizontal */
.hzm-pos-8 { top: 8%;     right: 2%;   width: 28px;  height: 100px; --rot: 22deg;  }  /* lavender vertical */
.hzm-pos-32{ bottom: -4%; right: 32%;  width: 22px;  height: 90px;  --rot: -14deg; }  /* pink vertical */

/* Left-side pebbles — all kept OUT of the title text rect
   (left 4–56%, top 22–80%). Live in the top band, bottom band,
   or the very narrow left edge. */
.hzm-pos-25 { top: 4%;     left: 10%;  width: 78px;  height: 78px;  --rot: 12deg;  }  /* dark-green — top-left ANCHOR */
.hzm-pos-26 { top: 14%;    left: 38%;  width: 14px;  height: 14px;  --rot: -18deg; }  /* lavender — micro, top band */
.hzm-pos-27 { top: 8%;     left: 4%;   width: 14px;  height: 14px;  --rot: 8deg;   }  /* pink — top band, far left */
.hzm-pos-28 { bottom: 8%;  left: 4%;   width: 36px;  height: 36px;  --rot: -10deg; }  /* lime — small-medium, far left */
.hzm-pos-29 { bottom: 6%;  left: 12%;  width: 68px;  height: 68px;  --rot: -22deg; }  /* dark-green — bottom-left ANCHOR */
.hzm-pos-30 { bottom: 12%; left: 32%;  width: 36px;  height: 36px;  --rot: 14deg;  }  /* lavender — small-medium, bottom */

/* Fill pebbles — only in safe zones (top band ≤ 20%, bottom band ≥ 80%) */
.hzm-pos-34 { top: 16%;    left: 28%;  width: 46px;  height: 46px;  --rot: -8deg;  }  /* pink — medium, top band */
.hzm-pos-35 { top: 84%;    left: 38%;  width: 18px;  height: 18px;  --rot: 18deg;  }  /* lime — micro, bottom band */
.hzm-pos-36 { bottom: 4%;  left: 22%;  width: 34px;  height: 34px;  --rot: -14deg; }  /* pink — small-medium, bottom */
.hzm-pos-37 { top: 12%;    left: 2%;   width: 16px;  height: 16px;  --rot: 20deg;  }  /* lavender — micro, far left */
.hzm-pos-38 { bottom: 4%;  left: 44%;  width: 42px;  height: 42px;  --rot: -16deg; }  /* lime — medium, bottom band */
.hzm-pos-39 { top: 18%;    left: 20%;  width: 20px;  height: 20px;  --rot: 24deg;  }  /* lime — small, top band (between pos-25 and pos-34) */


/* HZM color overrides for shared components */
body:has(.project-hero-image--hzm) .project-section-label h2 {
    color: #1a1a1a;
}

body:has(.project-hero-image--hzm) .project-section-label h3 {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .stat-number {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .stat-label {
    border-bottom-color: #5a0931;
}

body:has(.project-hero-image--hzm) .scroll-to-top {
    background: #5a0931;
    color: #fde4ee;
}

body:has(.project-hero-image--dna) .scroll-to-top {
    background: #115e59;
    color: #fff;
}

body:has(.project-hero-image--hzm) .project-nav-link:hover .project-nav-title {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .project-detail-number {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .meta-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a0931;
    letter-spacing: 0.07em;
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .meta-label {
    color: #E091BA;
}

body:has(.project-hero-image--hzm) .method-tags span {
    background: #5a0931;
    color: #fde4ee;
    font-weight: 600;
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .method-tags span {
    background: #5a0931;
    color: #fde4ee;
}

body:has(.project-hero-image--hzm) .project-sidebar {
    border-bottom-color: #5a0931;
}

body:has(.project-hero-image--hzm) .project-toc a.active {
    color: #5a0931;
    border-bottom-color: #5a0931;
}

/* Strong stays bold but inherits parent color — no colored emphasis. */

body:has(.project-hero-image--hzm) .client-brief p {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .insight-quote {
    background: #5a0931;
    box-shadow: 0 8px 22px rgba(90, 9, 49, 0.3);
}

body:has(.project-hero-image--hzm) .insight-quote p {
    color: #fde4ee;
}

body:has(.project-hero-image--hzm) .insight-quote cite {
    color: #fde4ee;
    opacity: 0.85;
}

/* Principle cards — cream bg, burgundy text, multicolor icon */
body:has(.project-hero-image--hzm) .principle-card {
    background: #fde4ee;
    box-shadow: 0 2px 8px rgba(55, 2, 28, 0.08);
    padding: 0.95rem 1.1rem;
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.25rem;
    align-items: start;
    border: 1px solid rgba(55, 2, 28, 0.08);
}

body:has(.project-hero-image--hzm) .principle-card:hover {
    background: #fffefc;
    box-shadow: 0 8px 18px rgba(55, 2, 28, 0.14);
    transform: translateY(-2px);
}

body:has(.project-hero-image--hzm) .principle-icon {
    background: #5a0931;
    color: #fde4ee;
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    grid-row: 1 / span 2;
    align-self: center;
}

body:has(.project-hero-image--hzm) .principle-icon svg {
    width: 16px;
    height: 16px;
}

body:has(.project-hero-image--hzm) .principle-card h3 {
    font-size: 0.92rem;
    margin-bottom: 0;
    line-height: 1.25;
    color: #5a0931;
    grid-column: 2;
    grid-row: 1;
}

body:has(.project-hero-image--hzm) .journey-head {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .project-section-content li::before {
    color: #5a0931;
}

body:has(.project-hero-image--hzm) .journey-step-num {
    background: #5a0931;
    color: #fde4ee;
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .journey-step-num {
    background: #E091BA;
    color: #1a1a1a;
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .journey-step h4 {
    color: #E091BA;
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .journey-step {
    border-color: rgba(224, 145, 186, 0.22);
}

[data-theme="dark"] body:has(.project-hero-image--hzm) .journey-step:hover {
    border-color: rgba(224, 145, 186, 0.45);
}

body:has(.project-hero-image--hzm) .principle-card p {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(50, 50, 50, 0.85);
    grid-column: 2;
    grid-row: 2;
}

/* DNA / bioinformatics project — bez boxů, jen ikona + text ve 2sloupcovém
   gridu. Předchozí solid tealové pilulky i bílé karty s borderem obě
   přebily sekci; feature list nepotřebuje kontejner, teal ikona
   sama poslouží jako vizuální kotva. */
body:has(.project-hero-image--dna) .principles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

body:has(.project-hero-image--dna) .principle-card {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    align-items: start;
    transition: none;
}

body:has(.project-hero-image--dna) .principle-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

body:has(.project-hero-image--dna) .principle-icon {
    background: rgba(17, 94, 89, 0.08);
    color: #115e59;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0.05rem;
}

body:has(.project-hero-image--dna) .principle-icon svg {
    width: 16px;
    height: 16px;
}

body:has(.project-hero-image--dna) .principle-card h3 {
    font-size: 0.95rem;
    color: #1a1a1a;
    margin-bottom: 0;
    line-height: 1.3;
    grid-column: 2;
    grid-row: 1;
}

body:has(.project-hero-image--dna) .principle-card p {
    font-size: 0.85rem;
    color: rgba(50, 50, 50, 0.75);
    line-height: 1.4;
    margin: 0;
    grid-column: 2;
    grid-row: 2;
}

[data-theme="dark"] body:has(.project-hero-image--dna) .principle-card h3 {
    color: #f0f0f0;
}

[data-theme="dark"] body:has(.project-hero-image--dna) .principle-card p {
    color: rgba(240, 240, 240, 0.7);
}

@media (max-width: 700px) {
    body:has(.project-hero-image--dna) .principles-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Results before/after stat cards — hlavní numerický důkaz dopadu.
   Two-column grid, teal fill na "after" kartě aby signalizovala řešení.
   Reuse of project accent #115e59 pro konzistenci s ostatní paletou. */
.results-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}

.results-stat {
    background: #fff;
    border: 1px solid rgba(17, 94, 89, 0.2);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.results-stat--after {
    background: #115e59;
    border-color: #115e59;
}

.results-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(17, 94, 89, 0.75);
    margin-bottom: 0.6rem;
}

.results-stat--after .results-stat-label {
    color: rgba(255, 255, 255, 0.75);
}

.results-stat-number {
    font-size: 2.1rem;
    font-weight: 700;
    color: #115e59;
    line-height: 1;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.results-stat--after .results-stat-number {
    color: #fff;
}

.results-stat-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

.results-stat--after .results-stat-desc {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 700px) {
    .results-stats {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .results-stat {
        padding: 1.25rem 1.4rem;
    }
    .results-stat-number {
        font-size: 1.85rem;
    }
}

/* Scanner variant of results-stat before/after karty — přepnutí z teal
   palety (DNA project default) na červenou, matchuje scanner accent
   #db2d3c (odvozené z Scan Receipt CTA v samotné aplikaci) použitý
   napříč project-3 (tags, strong, scroll-to-top…). Zároveň resetuji
   horní border/padding z generic .results-stats, které je pro
   project-2 (grid) zbytečné. */
body:has(.project-hero-image--scanner) .results-stats {
    border-top: none;
    padding-top: 0;
}

body:has(.project-hero-image--scanner) .results-stat {
    border-color: rgba(219, 45, 60, 0.2);
}

body:has(.project-hero-image--scanner) .results-stat--after {
    background: #db2d3c;
    border-color: #db2d3c;
}

body:has(.project-hero-image--scanner) .results-stat-label {
    color: rgba(219, 45, 60, 0.75);
}

body:has(.project-hero-image--scanner) .results-stat-number {
    color: #db2d3c;
}

body:has(.project-hero-image--scanner) .results-stat--after .results-stat-label,
body:has(.project-hero-image--scanner) .results-stat--after .results-stat-number,
body:has(.project-hero-image--scanner) .results-stat--after .results-stat-desc {
    color: #fff;
}

body:has(.project-hero-image--scanner) .results-stat--after .results-stat-label {
    color: rgba(255, 255, 255, 0.8);
}

body:has(.project-hero-image--scanner) .results-stat--after .results-stat-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* DNA variant of the insight-quote — validation blok pod before/after
   kartama ve Výsledcích. Light styl s teal border-accent místo full
   fill, aby s tmavou after-kartou nad ním nevznikal duo těžkých bloků.
   Border-left signalizuje "voice/feedback" beze zvýrazněného pozadí. */
.insight-quote.insight-quote--dna {
    background: transparent;
    color: var(--text);
    border: none;
    border-left: 3px solid #115e59;
    border-radius: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 2rem 0 0;
    box-shadow: none;
}

.insight-quote.insight-quote--dna::before {
    display: none;
}

.insight-quote.insight-quote--dna p {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.insight-quote.insight-quote--dna p strong {
    color: #115e59;
    font-weight: 700;
}

.insight-quote.insight-quote--dna cite {
    color: #115e59;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
}

/* Client brief — cream card with burgundy text + green border */
.client-brief {
    margin: 0 0 1.5rem;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid #5a0931;
    background: #fde4ee;
    border-radius: 0 12px 12px 0;
}

.client-brief p {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #5a0931;
    font-style: italic;
}

.client-brief cite {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    color: #5a0931;
    font-weight: 600;
}

/* Client logo lockup placed below the hero title/category — inline, no chrome */
.hero-client-logo {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
    position: relative;
    z-index: 3;
    opacity: 0.9;
}

.hero-client-logo:hover { opacity: 1; }

.hero-client-logo-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #992b50;
    letter-spacing: 0.02em;
}

.hero-client-logo img { display: block; width: auto; }

.hero-client-logo-mark     { height: 44px; flex-shrink: 0; }
.hero-client-logo-wordmark { height: 36px; }

[data-theme="dark"] .hero-client-logo-label    { color: #E091BA; }
[data-theme="dark"] .hero-client-logo-wordmark { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

@media (max-width: 600px) {
    .hero-client-logo { gap: 0.4rem; margin-top: 0.85rem; }
    .hero-client-logo-label    { font-size: 0.72rem; }
    .hero-client-logo-mark     { height: 34px; }
    .hero-client-logo-wordmark { height: 28px; }
}

/* Client logo lockup inside the Zadání section (above the brief quote) */
.section-client-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    padding: 0.55rem 0.95rem 0.55rem 0.85rem;
    background: #fde4ee;
    border: 1px solid rgba(55, 2, 28, 0.1);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(55, 2, 28, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section-client-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(55, 2, 28, 0.12);
}

.section-client-logo-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a0931;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-right: 0.7rem;
    border-right: 1px solid rgba(55, 2, 28, 0.15);
}

.section-client-logo img {
    display: block;
    width: auto;
}

.section-client-logo-mark {
    height: 32px;
    flex-shrink: 0;
}

.section-client-logo-wordmark {
    height: 24px;
}

[data-theme="dark"] .section-client-logo {
    background: rgba(253, 228, 238, 0.06);
    border-color: rgba(253, 228, 238, 0.12);
}

[data-theme="dark"] .section-client-logo-label {
    color: #E091BA;
    border-right-color: rgba(253, 228, 238, 0.18);
}

[data-theme="dark"] .section-client-logo-wordmark {
    filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

@media (max-width: 600px) {
    .section-client-logo {
        gap: 0.5rem;
        padding: 0.45rem 0.75rem 0.45rem 0.65rem;
    }
    .section-client-logo-label {
        font-size: 0.62rem;
        padding-right: 0.55rem;
    }
    .section-client-logo-mark { height: 26px; }
    .section-client-logo-wordmark { height: 20px; }
}

[data-theme="dark"] .client-brief {
    background: rgba(253, 228, 238, 0.08);
    border-left-color: #5a0931;
}

[data-theme="dark"] .client-brief p {
    color: #f0f0f0;
}

[data-theme="dark"] .client-brief cite {
    color: #E091BA;
}

/* Insight quotes — burgundy pull-quote, green emphasis */
.insight-quote {
    margin: 1.5rem 0;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, #5a0931 0%, #37021c 100%);
    border-radius: 14px;
    color: #fde4ee;
    box-shadow: 0 8px 22px rgba(55, 2, 28, 0.22);
    position: relative;
    overflow: hidden;
}

.insight-quote::before {
    content: '\201E';
    position: absolute;
    top: -1rem;
    right: 1rem;
    font-family: Georgia, serif;
    font-size: 6rem;
    line-height: 1;
    color: rgba(253, 228, 238, 0.12);
    pointer-events: none;
}

.insight-quote p {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #fde4ee;
    position: relative;
    z-index: 1;
}

.insight-quote p strong {
    font-weight: 700;
}

.insight-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.78rem;
    color: rgba(253, 228, 238, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
}

/* HZM card mockup in the UX list page — cream w/ confetti shapes */
.project-detail--hzm .project-detail-visual {
    background: #fde4ee;
    border-radius: 12px;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
    min-height: 240px;
}

.project-detail--hzm .project-detail-visual::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 30%;
    width: 70%;
    height: 90%;
    background: #fde4ee;
    border-radius: 50% 50% 8% 8% / 80% 80% 12% 12%;
    opacity: 0.7;
    pointer-events: none;
}

.hzm-card-mockup {
    position: relative;
    width: 100%;
    height: 200px;
    display: block;
}

.hzm-card-shape {
    position: absolute;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
}

.hzm-card-shape--bar-v {
    width: 38px;
    height: 150px;
    top: -6%;
    left: 30%;
    transform: rotate(4deg);
}

.hzm-card-shape--bar-h {
    width: 150px;
    height: 26px;
    bottom: 28%;
    left: -10%;
    transform: rotate(-6deg);
}

.hzm-card-shape--pebble-lg {
    width: 28px;
    height: 28px;
    top: 18%;
    right: 14%;
    transform: rotate(10deg);
}

.hzm-card-shape--pebble-sm {
    width: 20px;
    height: 20px;
    bottom: 16%;
    right: 12%;
    transform: rotate(-14deg);
}

.project-detail--hzm:hover .hzm-card-shape--bar-v     { transform: rotate(4deg)  translate(0, -4px); }
.project-detail--hzm:hover .hzm-card-shape--bar-h     { transform: rotate(-6deg) translate(6px, 0); }
.project-detail--hzm:hover .hzm-card-shape--pebble-lg { transform: rotate(20deg) scale(1.08); }
.project-detail--hzm:hover .hzm-card-shape--pebble-sm { transform: rotate(-24deg) translate(-3px, 2px); }

/* Responsive — HZM hero */
@media (max-width: 768px) {
    .project-hero-image--hzm {
        padding: 1rem 1.5rem;
        padding-top: calc(50px + 1rem);
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        min-height: 380px;
    }
    .project-hero-image--hzm .project-hero-title {
        font-size: 2.2rem;
    }
    .hzm-pos-1  { width: 44px;  height: 44px; }
    .hzm-pos-2  { width: 28px;  height: 28px; }
    .hzm-pos-3  { width: 22px;  height: 22px; }
    .hzm-pos-4  { width: 32px;  height: 32px; }
    .hzm-pos-5  { width: 26px;  height: 26px; }
    .hzm-pos-6  { width: 38px;  height: 140px; }
    .hzm-pos-7  { width: 140px; height: 24px; }
    .hzm-pos-8  { width: 32px;  height: 120px; }
    .hzm-pos-9  { width: 18px;  height: 18px; }
    .hzm-pos-10 { width: 20px;  height: 20px; }
    .hzm-pos-11 { width: 16px;  height: 16px; }
    .hzm-pos-12 { width: 14px;  height: 14px; }
    .hzm-pos-13 { width: 18px;  height: 18px; }
    .hzm-pos-14 { width: 24px;  height: 24px; }
    .hzm-pos-15 { width: 12px;  height: 12px; }
    .hzm-pos-16 { width: 110px; height: 18px; }
    .hzm-pos-17 { width: 22px;  height: 95px; }
    .hzm-pos-18 { width: 11px;  height: 11px; }
    .hzm-pos-19 { width: 10px;  height: 10px; }
    .hzm-pos-20 { width: 17px;  height: 17px; }
    .hzm-pos-21 { width: 12px;  height: 12px; }
    .hzm-pos-22 { width: 14px;  height: 14px; }
    .hzm-pos-23 { width: 11px;  height: 11px; }
    .hzm-pos-24 { width: 12px;  height: 12px; }
    .hzm-pos-25 { width: 14px;  height: 14px; }
    .hzm-pos-26 { width: 17px;  height: 17px; }
    .hzm-pos-27 { width: 11px;  height: 11px; }
    .hzm-pos-28 { width: 14px;  height: 14px; }
    .hzm-pos-29 { width: 11px;  height: 11px; }
    .hzm-pos-30 { width: 10px;  height: 10px; }
    .hzm-pos-31 { width: 95px;  height: 14px; }
    .hzm-pos-32 { width: 20px;  height: 85px; }
    .hzm-pos-33 { width: 85px;  height: 14px; }
    .hzm-pos-34 { width: 12px;  height: 12px; }
    .hzm-pos-35 { width: 14px;  height: 14px; }
    .hzm-pos-36 { width: 16px;  height: 16px; }
    .hzm-pos-37 { width: 12px;  height: 12px; }
    .hzm-pos-38 { width: 22px;  height: 22px; }
    .hzm-pos-39 { width: 18px;  height: 18px; }
}

@media (max-width: 480px) {
    .project-hero-image--hzm {
        padding: 0.5rem 1rem;
        padding-top: calc(50px + 0.5rem);
        min-height: 320px;
    }
    .project-hero-image--hzm .project-hero-title {
        font-size: 1.6rem;
    }
    .hzm-pos-1  { width: 34px;  height: 34px; }
    .hzm-pos-2  { width: 22px;  height: 22px; }
    .hzm-pos-3  { width: 18px;  height: 18px; }
    .hzm-pos-4  { width: 24px;  height: 24px; }
    .hzm-pos-5  { width: 20px;  height: 20px; }
    .hzm-pos-6  { width: 28px;  height: 100px; }
    .hzm-pos-7  { width: 100px; height: 18px; }
    .hzm-pos-8  { width: 24px;  height: 90px; }
    .hzm-pos-9  { width: 14px;  height: 14px; }
    .hzm-pos-10 { width: 16px;  height: 16px; }
    .hzm-pos-11 { width: 12px;  height: 12px; }
    .hzm-pos-12 { width: 10px;  height: 10px; }
    .hzm-pos-13 { width: 14px;  height: 14px; }
    .hzm-pos-14 { width: 18px;  height: 18px; }
    .hzm-pos-15 { width: 10px;  height: 10px; }
    .hzm-pos-16 { width: 80px;  height: 14px; }
    .hzm-pos-17 { width: 18px;  height: 70px; }
    .hzm-pos-18 { width: 9px;   height: 9px;  }
    .hzm-pos-19 { width: 8px;   height: 8px;  }
    .hzm-pos-20 { width: 13px;  height: 13px; }
    .hzm-pos-21 { width: 10px;  height: 10px; }
    .hzm-pos-22 { width: 11px;  height: 11px; }
    .hzm-pos-23 { width: 9px;   height: 9px;  }
    .hzm-pos-24 { width: 10px;  height: 10px; }
    .hzm-pos-25 { width: 11px;  height: 11px; }
    .hzm-pos-26 { width: 13px;  height: 13px; }
    .hzm-pos-27 { width: 9px;   height: 9px;  }
    .hzm-pos-28 { width: 11px;  height: 11px; }
    .hzm-pos-29 { width: 9px;   height: 9px;  }
    .hzm-pos-30 { width: 8px;   height: 8px;  }
    .hzm-pos-31 { width: 70px;  height: 11px; }
    .hzm-pos-32 { width: 16px;  height: 65px; }
    .hzm-pos-33 { width: 65px;  height: 11px; }
    .hzm-pos-34 { width: 10px;  height: 10px; }
    .hzm-pos-35 { width: 11px;  height: 11px; }
    .hzm-pos-36 { width: 13px;  height: 13px; }
    .hzm-pos-37 { width: 10px;  height: 10px; }
    .hzm-pos-38 { width: 17px;  height: 17px; }
    .hzm-pos-39 { width: 14px;  height: 14px; }
    .client-brief {
        padding: 1rem 1.25rem;
    }
    .client-brief p { font-size: 1rem; }
    .insight-quote {
        padding: 1rem 1.25rem;
    }
    .insight-quote p { font-size: 0.98rem; }
}

/* ================================
   CV PAGE
   ================================ */

.cv-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 2rem 4rem;
}

.cv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--gray-light);
    flex-wrap: wrap;
}

.cv-header-text .cv-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    line-height: 1.1;
}

.cv-tagline {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.cv-contact-line {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cv-contact-line a {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--gray);
}

.cv-contact-line a:hover {
    color: var(--accent);
}

.cv-contact-line .sep {
    margin: 0 0.5rem;
    color: var(--gray);
}

.cv-summary {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 3rem;
    max-width: 700px;
}

.cv-section {
    margin-bottom: 3rem;
}

.cv-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-light);
}

.cv-entry {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--gray-light);
}

.cv-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cv-entry-meta {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.2rem;
}

.cv-entry-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.cv-entry-title em {
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cv-entry-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.cv-entry-desc {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.55;
}

.cv-entry-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cv-entry-bullets li {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.55;
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: 0.3rem;
}

.cv-entry-bullets li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.cv-skills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.cv-skill-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--gray-light);
}

.cv-skill-row:last-child {
    border-bottom: none;
}

.cv-skill-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.cv-skill-items {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.cv-appendix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-light);
}

.cv-edu-item {
    margin-bottom: 1.5rem;
}

.cv-edu-item:last-child {
    margin-bottom: 0;
}

.cv-edu-date {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.cv-edu-degree {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.cv-edu-school {
    font-size: 0.9rem;
    color: var(--text);
}

.cv-edu-extra {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.cv-lang-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--gray-light);
    font-size: 0.95rem;
    color: var(--text);
}

.cv-lang-item:last-child {
    border-bottom: none;
}

.cv-lang-level {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.cv-back-to-about {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.cv-back-to-about:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* CV link card on about page */
.cv-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    background: var(--gray-light);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.3s, transform 0.3s;
    margin-top: 1.5rem;
}

.cv-link-card:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.cv-link-card-text {
    flex: 1;
}

.cv-link-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.cv-link-card-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cv-link-card:hover .cv-link-card-desc {
    color: rgba(255, 255, 255, 0.85);
}

.cv-link-card-arrow {
    font-size: 1.5rem;
    font-weight: 700;
}

/* CV page mobile */
@media (max-width: 768px) {
    .cv-page {
        padding: 90px 1.25rem 3rem;
    }

    .cv-header-text .cv-name {
        font-size: 1.85rem;
    }

    .cv-entry,
    .cv-skill-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .cv-entry-meta {
        font-size: 0.75rem;
    }

    .cv-appendix {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cv-link-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem 1.5rem;
    }

    .cv-link-card-arrow {
        align-self: flex-end;
    }
}

/* Print stylesheet for CV page */
@media print {
    .nav,
    .footer,
    .cv-download,
    .cv-back-to-about {
        display: none !important;
    }
    .cv-page {
        padding: 0;
        max-width: 100%;
    }
    body {
        font-size: 10pt;
    }
    .cv-entry,
    .cv-section {
        page-break-inside: avoid;
    }
}

/* Dark mode CV adjustments */
[data-theme="dark"] .cv-link-card {
    background: var(--gray-light);
}

[data-theme="dark"] .cv-link-card-desc {
    color: var(--text-muted);
}

/* ================================
   MINIFIGS SYNC — content components
   Diagram, story milestones, deep-dive challenges
   ================================ */

/* Flow diagram: sources → engine → admin */
.sync-flow {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1fr;
    gap: 1.25rem;
    margin: 1.75rem 0;
    align-items: center;
    padding: 1.75rem 1.5rem;
    background: var(--gray-light);
    border-radius: 14px;
}

.sync-flow-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sync-flow-node {
    padding: 1rem 1.15rem;
    background: var(--bg);
    border: 1px solid var(--gray);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sync-flow-node--engine {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
    padding: 1.5rem 1.25rem;
}

.sync-flow-node--admin {
    border-color: var(--accent);
    border-left-width: 3px;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(232, 93, 59, 0.05) 100%);
}

.sync-flow-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.sync-flow-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.sync-flow-node--engine .sync-flow-sub {
    color: rgba(255, 255, 255, 0.7);
}

.sync-flow-stack {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-top: 0.65rem;
    font-family: 'SF Mono', Consolas, monospace;
    line-height: 1.5;
}

.sync-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.25rem 0;
    font-weight: 600;
}

.sync-flow-arrow::after {
    content: '→';
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.sync-flow-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--text);
}

.sync-flow-list li {
    padding-left: 0.75rem;
    position: relative;
}

.sync-flow-list li::before {
    content: '·';
    color: var(--accent);
    font-weight: 700;
    position: absolute;
    left: 0;
}

@media (max-width: 900px) {
    .sync-flow {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .sync-flow-arrow::after { content: '↓'; }
}

/* Story milestones — narrative timeline */
.story-milestones {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.story-milestone {
    display: grid;
    grid-template-columns: 135px 1fr;
    gap: 1.25rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    align-items: start;
}

.story-milestone-when {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding-top: 0.2rem;
}

.story-milestone-what {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text);
}

.story-milestone-what strong {
    color: var(--text);
    font-weight: 700;
}

@media (max-width: 768px) {
    .story-milestone {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

/* Deep-dive challenges — each is a labelled callout with Problem + Solution */
.challenge-deep {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--gray-light);
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}

.challenge-deep h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.challenge-deep p {
    margin-bottom: 0.75rem;
    line-height: 1.55;
    color: var(--text);
}

.challenge-deep p:last-child {
    margin-bottom: 0;
}

.challenge-deep code {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.85em;
    background: var(--bg);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    color: var(--accent);
    white-space: nowrap;
}

[data-theme="dark"] .sync-flow,
[data-theme="dark"] .challenge-deep {
    background: var(--gray-light);
}

/* ================================
   BIOINFORMATICS HERO (--dna)
   Dark navy background + animated SVG DNA double helix backdrop.
   Same structural pattern as .project-hero-image--minifigs:
   layout (text left, min-height 464px), nav overrides,
   title/category hierarchy (title first, category below).
   ================================ */

.project-hero-image--dna {
    background: linear-gradient(135deg, #0a1929 0%, #0f2f3a 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

/* PAE (Predicted Aligned Error) heatmap — canvas backdrop styled after
   the classic AlphaFold PAE plot: green matrix where dark = high
   confidence (low expected position error) and light = low confidence.
   The cursor becomes a bioinformatics crosshair — hovering over a cell
   highlights its row + column (real PAE plots do this too).
   Painted by setupPaeHeatmap in js/app.js. */
.dna-molecular {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
}

@media (max-width: 768px) {
    .dna-molecular { opacity: 0.85; }
}

/* Baked laptop-mockup screenshot on the right side of the hero.
   The PNG already contains the MacBook frame + shadow, so we skip
   border-radius / box-shadow (they would compete with what's in the
   image). */
.project-hero-image--dna img {
    max-width: 720px;
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}

/* Animated variant retained for reference — hero-laptop-* rules below
   are dormant until a matching .hero-laptop element is present again. */
.hero-laptop {
    position: relative;
    width: 560px;              /* fixed size — flex + aspect-ratio can compute to 0 in some layouts */
    height: 346px;             /* 560 × (2040 / 3304) */
    max-width: 100%;
    z-index: 3;
    flex-shrink: 0;
    --screen-top: 14.7%;
    --screen-left: 15.1%;
    --screen-width: 69.7%;
    --screen-height: 70.6%;
}

.hero-laptop-viewport {
    position: absolute;
    top: var(--screen-top);
    left: var(--screen-left);
    width: var(--screen-width);
    height: var(--screen-height);
    overflow: hidden;
    background: #fff;
    z-index: 1;
}

.hero-laptop-scroll {
    display: block;
    width: 100%;               /* image fits full width of viewport, no crop */
    height: auto;
    animation: hero-laptop-scroll 20s infinite;
    animation-timing-function: linear;
    /* Fallback --end used before JS measures the real image height —
       ensures the animation moves even if the JS hook doesn't run. */
    --end: -400px;
}

.hero-laptop-mockup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Read-scroll-read natural rhythm — same as the laptop-scroll.html
   utility.  Four dwell stops (top / 35% / 70% / bottom) with smooth
   ease-in-out transitions between them.  The --end variable is set
   from JS (setupHeroLaptopScroll) based on the scrolled image height. */
@keyframes hero-laptop-scroll {
    0%   { transform: translateY(0); animation-timing-function: linear; }
    8%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    25%  { transform: translateY(calc(var(--end, 0px) * 0.35)); animation-timing-function: linear; }
    38%  { transform: translateY(calc(var(--end, 0px) * 0.35)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    55%  { transform: translateY(calc(var(--end, 0px) * 0.7)); animation-timing-function: linear; }
    68%  { transform: translateY(calc(var(--end, 0px) * 0.7)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    82%  { transform: translateY(var(--end, 0px)); animation-timing-function: linear; }
    92%  { transform: translateY(var(--end, 0px)); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-laptop-scroll { animation: none; }
}

@media (max-width: 768px) {
    .hero-laptop { max-width: 100%; }
}

.project-hero-image--dna .project-hero-image__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.project-hero-image--dna .project-hero-image__text {
    flex: 1;
    text-align: left;
}

.project-hero-image--dna .project-hero-title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    line-height: 1.1;
    white-space: pre-line;
    /* Multi-layer dark halo so the animated DNA strands don't collide with letters.
       Denser inner shadows (short blur) create a hard dark border directly around
       each letter; outer shadows (long blur) soften the halo into the background. */
    text-shadow:
        0 0 12px rgba(6, 15, 25, 1),
        0 0 24px rgba(6, 15, 25, 0.95),
        0 0 48px rgba(6, 15, 25, 0.75),
        0 2px 20px rgba(6, 15, 25, 0.9);
}

.project-hero-image--dna .project-hero-category {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-shadow:
        0 0 10px rgba(6, 15, 25, 1),
        0 0 20px rgba(6, 15, 25, 0.9),
        0 1px 14px rgba(6, 15, 25, 0.9);
}

/* Nav over the dark bio hero — uses the project accent teal
   (#115e59 — same color as the tech tags, meta labels, and TOC
   accent). Semi-transparent over the hero, fades to solid via
   ::before when .nav--solid is toggled on scroll. */
body:has(.project-hero-image--dna) .nav {
    background: rgba(8, 48, 43, 0.9);
}

body:has(.project-hero-image--dna) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #08302b;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:has(.project-hero-image--dna) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--dna) .nav a {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(94, 234, 212, 0.1);
    position: relative;
    z-index: 1;
}

body:has(.project-hero-image--dna) .nav a:hover {
    color: #fff;
    background: rgba(94, 234, 212, 0.22);
}

/* Wrapper divs inside .nav need the same lift so all children
   (nav-left, nav-right) render above the ::before overlay. */
body:has(.project-hero-image--dna) .nav > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .project-hero-image--dna {
        padding: 1rem 1rem;
        padding-top: calc(50px + 0.5rem);
        margin-left: 0;
        padding-left: 1rem;
        width: 100%;
        min-height: 320px;
    }
    .project-hero-image--dna .project-hero-title {
        font-size: 2rem;
    }
    .project-hero-image--dna .project-hero-category {
        font-size: 0.85rem;
    }
}

/* ================================
   BIO — flow diagram + deep dives (reuse story-milestones/challenge-deep
   from Minifigs styles; no extra CSS needed).
   ================================ */

/* Pipeline — lab-notebook themed 3-stage diagram. Cream paper base
   with a subtle blue-grey grid, three "sample cards" pinned with
   yellow highlighter-tape corners. Big display numbers (5 → 1 → 6)
   are marker-highlighted like a chemist would circle a key value
   in her notes. Story: many public sources converge into one
   record, then fan out to many views. Inspired by real TLC-sample
   lab books and organic-chemistry notes on hex paper. */
/* Square grid paper — clean notebook style, subtle blue-grey lines
   on cream. */
.pipeline {
    list-style: none;
    margin: 2.25rem 0;
    padding: 2.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    position: relative;
    background-color: #faf6ec;
    background-image:
        linear-gradient(rgba(30, 60, 90, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 60, 90, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    border-radius: 4px;
    border: 1px solid rgba(30, 60, 90, 0.1);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 23, 42, 0.06);
}

/* "Notebook margin" — thin red vertical rule at the far left of
   the panel, before the cards begin, like the left margin of a
   school notebook. Sits in the padding zone so it stays visible
   against the cream paper. */
.pipeline::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 1.15rem;
    width: 1px;
    background: rgba(196, 78, 78, 0.55);
    z-index: 0;
    pointer-events: none;
}

/* "Revision" annotation — small typed reference in the top-right,
   like a lab-book page header (REV 1 · 11-2025). */
.pipeline::after {
    content: 'REV 1 · 11-2025';
    position: absolute;
    top: 0.7rem;
    right: 1.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(30, 60, 90, 0.45);
    font-variant-numeric: tabular-nums;
    z-index: 0;
    pointer-events: none;
}

/* Card — pure white paper on the cream notebook, deeper shadow so
   it clearly sits ON the page instead of blending into it. Slight
   individual rotation makes each feel hand-mounted, not aligned by
   a script. */
.pipeline-stage {
    background: #ffffff;
    border: 1px solid rgba(30, 60, 90, 0.1);
    border-radius: 2px;
    padding: 1.7rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    min-width: 0;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.07),
        0 8px 18px rgba(15, 23, 42, 0.09),
        0 24px 48px rgba(15, 23, 42, 0.07);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.pipeline-stage:nth-child(1) { transform: rotate(-0.4deg); }
.pipeline-stage:nth-child(2) { transform: rotate(0.3deg) translateY(-2px); }
.pipeline-stage:nth-child(3) { transform: rotate(-0.25deg); }

.pipeline-stage:hover {
    transform: translateY(-4px) rotate(0);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 12px 26px rgba(15, 23, 42, 0.1),
        0 32px 56px rgba(17, 94, 89, 0.13);
}

/* Yellow washi tape at the top of each card. Asymmetric position
   per stage to keep the "someone taped these here" feel. */
.pipeline-stage::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 1.15rem;
    width: 4rem;
    height: 1.35rem;
    background: linear-gradient(180deg, rgba(250, 220, 70, 0.82) 0%, rgba(248, 208, 45, 0.65) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transform: rotate(-4deg);
    z-index: 4;
    pointer-events: none;
    border-radius: 1px;
}

.pipeline-stage:nth-child(2)::before {
    transform: rotate(3deg);
    left: auto;
    right: 1.15rem;
}

.pipeline-stage:nth-child(3)::before {
    transform: rotate(-2.5deg);
    left: 42%;
}

/* Arrow between cards — bigger and more expressive than before, so
   it doesn't get lost in the gap. Uses a hand-drawn feel via
   quadratic curve + slight jitter in stroke width. */
.pipeline-stage:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 6.5rem;
    right: -1.8rem;
    width: 40px;
    height: 22px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='%23164e63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 Q14 5 32 10'/><path d='M25 3 L34 10 L25 17'/></svg>") no-repeat center / contain;
    z-index: 5;
    opacity: 0.85;
}

/* Sample tag — lab-notation eyebrow ("№ 01 / 03  ZDROJE"). The
   fraction shows progression through the pipeline, ink-blue color
   feels like fountain-pen notation. Distinct-weight parts create
   micro-typographic rhythm. */
.pipeline-stage-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #164e63;
}

.pipeline-stage-tag-num {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    background: rgba(20, 78, 99, 0.09);
    border-radius: 3px;
    color: #164e63;
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.pipeline-stage-tag-label {
    color: #1e2a44;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* Big display metric — the visual anchor. Number is highlighter-
   marked (yellow band from baseline up to ~42 % of height); a two-line
   label sits baseline-aligned beside it, with an italic "adjective"
   line and a plain-weight "noun phrase" line. */
.pipeline-stage-metric {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.4rem 0 0.25rem;
}

/* Big display number — highlighter-marked from baseline like a real
   marker stripe. Single visual accent, clean reading. */
.pipeline-stage-count {
    font-size: 4.75rem;
    font-weight: 800;
    color: #1e2a44;
    letter-spacing: -0.06em;
    line-height: 0.88;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(
        to top,
        rgba(250, 218, 55, 0.78) 0%,
        rgba(250, 218, 55, 0.78) 44%,
        transparent 44%,
        transparent 100%
    );
    padding: 0 0.2rem;
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.pipeline-stage-count-label {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    color: #334155;
    line-height: 1.2;
}

.pipeline-stage-count-label-lead {
    font-size: 0.78rem;
    font-style: italic;
    color: #64748b;
}

.pipeline-stage-count-label-body {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e2a44;
    max-width: 8.5rem;
}

/* Rule — solid ink-blue thin line, more visible than the previous
   dashed variant while still feeling drawn rather than digital. */
.pipeline-stage-rule {
    border: none;
    height: 1px;
    background: rgba(30, 60, 90, 0.22);
    margin: 0.35rem 0 0.1rem;
    width: 100%;
}

/* Detail list — lab-book style entries. Stage 01 has "name → desc"
   two-column rows; stages 02, 03 use compact left-aligned rows with
   a teal square marker (like a lab-book checkbox before an entry).
   Small italic parentheticals (via <em>) add scientific-notation
   texture without disturbing the primary reading. */
.pipeline-stage-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.35;
}

.pipeline-stage-items li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0;
    color: #475569;
}

.pipeline-stage-items b {
    color: #1e2a44;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    min-width: 4.75rem;
    font-size: 0.85rem;
}

.pipeline-stage-items span {
    color: #64748b;
    font-size: 0.78rem;
    text-align: right;
    line-height: 1.35;
    font-style: italic;
}

.pipeline-stage-items em {
    font-style: italic;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 400;
    margin-left: 0.2rem;
}

/* Plain variant — teal square marker as a "lab-book checkbox"
   preceding each entry. Squares (not dots) reinforce the note-taking
   grid vibe. Dark ink text for high contrast on white cards. */
.pipeline-stage-items--plain li {
    justify-content: flex-start;
    color: #1e2a44;
    padding-left: 1.15rem;
    position: relative;
    font-size: 0.83rem;
}

.pipeline-stage-items--plain li::before {
    content: '';
    position: absolute;
    left: 0.05rem;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #115e59;
}

@media (max-width: 900px) {
    .pipeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.75rem 1.25rem;
    }
    .pipeline::before {
        left: 1.6rem;
    }
    .pipeline-stage-count {
        font-size: 3.5rem;
    }
    .pipeline-stage:nth-child(1),
    .pipeline-stage:nth-child(2),
    .pipeline-stage:nth-child(3) {
        transform: rotate(0);
    }
    .pipeline-stage:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -1.25rem;
        transform: translate(50%, 0) rotate(90deg);
    }
}

/* Legacy .bio-flow — dormant until removed. Keeps old CSS references
   from breaking if any elements linger. */
.bio-flow {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
    align-items: stretch;
    padding: 2rem 1.75rem;
    background: #fafafa;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.bio-flow-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
}

/* Chevron arrow between columns — sits absolute-positioned on the
   RIGHT edge of columns 1 and 2, vertically centered. Uses SVG for
   crisp rendering at any size, coloured with the project teal. */
.bio-flow-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.15rem;
    transform: translate(50%, -50%);
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") no-repeat center / contain;
    z-index: 2;
}

.bio-flow-source {
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.bio-flow-source:hover {
    border-color: #115e59;
    transform: translateY(-1px);
}

.bio-flow-source-name {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f172a;
    min-width: 4.5rem;
    font-size: 0.85rem;
}

.bio-flow-source-role {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.35;
}

/* Legacy .bio-flow-arrow — removed from HTML but keep an empty rule so
   any stray element still renders invisibly. */
.bio-flow-arrow {
    display: none;
}

/* Middle engine card — solid teal, no gradients, no radial glow.
   Signals the pipeline core through solid color contrast, not
   AI-SaaS gradient effects. */
.bio-flow-engine {
    padding: 1.5rem 1.35rem;
    background: #115e59;
    color: #ffffff;
    border-radius: 14px;
    align-self: center;
}

.bio-flow-engine-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.bio-flow-engine-sub {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}

.bio-flow-engine-stack {
    display: none;
}

/* Right viewer card — clean white card with teal dot list items. */
.bio-flow-viewer {
    padding: 1.35rem 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
}

.bio-flow-viewer-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.bio-flow-viewer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bio-flow-viewer-list li {
    padding-left: 1.1rem;
    position: relative;
    color: #334155;
}

.bio-flow-viewer-list li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #115e59;
}

@media (max-width: 900px) {
    .bio-flow {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        padding: 1.5rem 1rem;
    }
    .bio-flow-col:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -1.5rem;
        transform: translate(50%, 0) rotate(90deg);
    }
    .bio-flow-engine {
        align-self: stretch;
    }
}

/* Entity card — used in Bioinformatics "Jak to funguje" section for the
   Protein MongoDB document.  Header with entity name + meta, body with
   label/value rows grouped by category.  Reads much cleaner than a long
   inline paragraph of fields separated by commas. */
.entity-card {
    background: var(--bg);
    border: 1px solid var(--gray);
    border-radius: 12px;
    overflow: hidden;
    margin: 1.25rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.entity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: var(--text);
    color: var(--bg);
}

.entity-card-title {
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.entity-card-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.entity-card-body {
    padding: 0.25rem 0;
}

.entity-field-group {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--gray-light);
    align-items: baseline;
}

.entity-field-group:last-child {
    border-bottom: none;
}

.entity-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.entity-field-value {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

.entity-field-value code {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.85em;
    background: var(--gray-light);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    color: var(--text);
}

@media (max-width: 768px) {
    .entity-field-group {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

[data-theme="dark"] .entity-card {
    background: var(--gray-light);
    border-color: var(--gray);
}

/* Project figure — screenshot with caption used inside content sections.
   Rounded card, subtle border + shadow, muted caption below. */
.project-figure {
    margin: 2rem 0 0.5rem;
    padding: 0;
}

/* Two mockups side-by-side, wider than the text column. Vytaženo z content
   sloupce sekce Výsledky. Break-out přes negative margin ven z 1100px
   .project-content, aby screenshoty dostaly víc šířky (evidence-galerie
   místo dvou malých náhledů). */
.project-figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0 0;
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
}

.project-figure-pair .project-figure {
    margin: 0;
}

@media (max-width: 900px) {
    .project-figure-pair {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-left: 0;
        margin-right: 0;
    }
}

.project-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--gray-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    background: var(--bg);
}

.project-figure figcaption {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    padding: 0 0.25rem;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="dark"] .project-figure img {
    border-color: var(--gray);
}

/* DNA project figures use baked-in laptop mockups (Group 9/10/11 —
   the notebook frame is already part of the PNG). Suppress the
   outer border/shadow/radius so we don't get a double-frame
   effect on top of the baked mockup. */
body:has(.project-hero-image--dna) .project-figure img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Framed variant — for raw web screenshots (like the AlphaFold page)
   that DO need a rounded frame + subtle shadow to read as a
   screenshot rather than page content. Restores the default
   .project-figure img treatment on the framed subset. */
body:has(.project-hero-image--dna) .project-figure--framed img {
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    background: var(--bg);
}

/* Browser-chrome variant — wraps a raw screenshot inside a mock
   browser window (traffic-light dots + URL bar). Reads as "another
   tab they had to open", which reinforces the multi-site pain
   point. Slight tilt matches the taped-card aesthetic of the
   pipeline diagram above. */

.browser-frame {
    background: #f2f3f5;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 20px rgba(15, 23, 42, 0.08),
        0 24px 48px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    position: relative;
}

.browser-frame-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem;
    background: linear-gradient(180deg, #f7f8fa 0%, #eaebee 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.browser-frame-dots {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.browser-frame-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
}

.browser-frame-dot--red { background: #ff5f57; }
.browser-frame-dot--yellow { background: #febc2e; }
.browser-frame-dot--green { background: #28c840; }

.browser-frame-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.72rem;
    color: #475569;
    letter-spacing: 0.01em;
    text-align: center;
    justify-content: center;
    max-width: 32rem;
    margin: 0 auto;
}

.browser-frame-lock {
    color: #64748b;
    flex-shrink: 0;
}

/* Screenshot inside the browser frame has no additional border/shadow
   because the frame provides them. */
body:has(.project-hero-image--dna) .project-figure--browser .browser-frame img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* The zoom trigger button around the browser frame — transparent
   wrapper so the frame's own shadow/border shows through. */
body:has(.project-hero-image--dna) .project-figure--browser .image-zoom {
    background: transparent;
    padding: 0;
    border: none;
    cursor: zoom-in;
    overflow: visible;
}

/* Zoom trigger inside project-figure: transparent block wrapping the
   image so box-shadow, border and border-radius stay on the img itself
   (overflow: visible so the shadow isn't clipped by the button box). */
.project-figure .image-zoom {
    overflow: visible;
    border-radius: 10px;
}

/* Custom zoom button for the animated laptop mockup — reuses the
   image-zoom visual affordance (cursor + focus outline) but is bound
   to a separate handler (setupLaptopMockupLightbox) that clones the
   whole animated laptop into a full-screen overlay instead of opening
   a static image. */
.laptop-zoom {
    display: block;
    width: 100%;
    max-width: 820px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    position: relative;
}

.laptop-zoom:focus-visible {
    outline: 2px solid #2B5740;
    outline-offset: 4px;
    border-radius: 10px;
}

/* Full-screen overlay that shows the cloned .hero-laptop scaled up
   so the reader can watch the auto-scroll at readable size. The clone
   inherits the same @keyframes laptop-scroll-detail animation because
   CSS animations re-play from 0 % when a new DOM node is created. */
.laptop-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 15, 20, 0.94);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.laptop-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.laptop-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.laptop-lightbox .hero-laptop {
    /* Scale laptop up: max out on either width or height whichever
       is limiting. Aspect ratio 3304 / 2040 = 1.62 kept. */
    width: min(92vw, calc(80vh * 1.62));
    max-width: none;
    height: auto;
    aspect-ratio: 3304 / 2040;
}

.laptop-lightbox-caption {
    display: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    text-align: center;
    max-width: 700px;
    line-height: 1.5;
    padding: 0 1rem;
}

.laptop-lightbox.has-caption .laptop-lightbox-caption {
    display: block;
}

/* Inside the lightbox: image renders at 100 % viewport width (same as
   in-page figure) so the scrolled content stays legible. Uses the
   same @keyframes laptop-scroll-detail defined for the in-page
   figure — the clone reuses it because CSS animations attach to
   the class name, not the DOM node. */
.laptop-lightbox .hero-laptop-scroll {
    width: 100%;
    max-width: none;
    animation: laptop-scroll-detail 14s infinite;
    animation-timing-function: linear;
}

.laptop-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.laptop-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: scale(1.08);
}

@media (max-width: 600px) {
    .laptop-lightbox {
        padding: 1rem;
    }
    .laptop-lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 40px;
        height: 40px;
    }
}

/* Laptop mockup variant of project-figure — the .hero-laptop element
   already renders its own MacBook frame, so we strip the outer figure
   card styling (border, radius, shadow) from the inner img children and
   center the laptop within the content column. */
.project-figure--laptop {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-figure--laptop .hero-laptop {
    width: 100%;
    max-width: 820px;
    height: auto;
    aspect-ratio: 3304 / 2040;
}

.project-figure--laptop .hero-laptop img,
.project-figure--laptop .hero-laptop-scroll,
.project-figure--laptop .hero-laptop-mockup {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Zoomed screenshot fills the full mockup viewport width — no crop.
   Screenshot is 2301 × 4806 (aspect 2.09) — at 100 % viewport width the
   rendered image is ~3.34× taller than the viewport (whose aspect is
   ~1.60 from the mockup screen area). So the true bottom of the image
   is at translateY(-70 %) of the image's own height. Using image-relative
   percentages instead of the JS-computed --end pixel value guarantees
   the animation reaches the real bottom regardless of laptop scale. */
.project-figure--laptop .hero-laptop-scroll {
    width: 100%;
    max-width: none;
    animation: laptop-scroll-detail 14s infinite;
    animation-timing-function: linear;
}

@keyframes laptop-scroll-detail {
    /* 0–7 %   dwell at top (Basic Info + AlphaFold Prediction) */
    0%   { transform: translateY(0); animation-timing-function: linear; }
    7%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    /* 7–22 % scroll to ~17.5 % (Amino Acid Sequence) */
    22%  { transform: translateY(-17.5%); animation-timing-function: linear; }
    /* 22–32 % dwell (reading sequence) */
    32%  { transform: translateY(-17.5%); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    /* 32–47 % scroll to ~35 % (PAE + 3D structure) */
    47%  { transform: translateY(-35%); animation-timing-function: linear; }
    /* 47–57 % dwell (reading 3D + PAE) */
    57%  { transform: translateY(-35%); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    /* 57–72 % scroll to ~52.5 % (IGV genomic context) */
    72%  { transform: translateY(-52.5%); animation-timing-function: linear; }
    /* 72–80 % dwell (reading IGV) */
    80%  { transform: translateY(-52.5%); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    /* 80–90 % scroll to true bottom (publications) — -70 % of image height */
    90%  { transform: translateY(-70%); animation-timing-function: linear; }
    /* 90–95 % dwell at bottom */
    95%  { transform: translateY(-70%); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    /* 95–100 % return to top */
    100% { transform: translateY(0); }
}

.project-figure--laptop figcaption {
    text-align: center;
    max-width: 560px;
}

/* ================================
   SCANNER HERO — project-3 (Mobilní skener účtenek)
   Dark crimson gradient derived from the app's own Scan Receipt /
   Save to Dynamics 365 button (bright red). Hero uses deeper
   red-800/900 so the accent (red-600) pops on white content cards.
   Accent: #db2d3c — přesná červená z aplikace (Scan Receipt CTA,
   Save to Dynamics 365, receipt icons).
   ================================ */

.project-hero-image--scanner {
    background:
        radial-gradient(ellipse 800px 500px at 70% 50%, rgba(255, 170, 170, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at 15% 30%, rgba(0, 0, 0, 0.22) 0%, transparent 70%),
        linear-gradient(135deg, #7a1922 0%, #a2222f 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

/* Subtle receipt-printer grid overlay — thin horizontal lines every
   32px that read as continuous paper feed. Very low opacity so it
   sits under the receipts and viewfinder without competing. */
.project-hero-image--scanner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(255, 255, 255, 0.035) 31px,
            rgba(255, 255, 255, 0.035) 32px
        );
    pointer-events: none;
    z-index: 0;
}

/* Scanner canvas — camera-viewfinder + floating receipts animation.
   Painted by setupScannerViewfinder in js/app.js. Fills the hero and
   sits above the background gradient but below the content text. */
.scanner-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.project-hero-image--scanner .project-hero-image__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
}

.project-hero-image--scanner .project-hero-image__text {
    flex: 1;
    max-width: 620px;
}

/* Hero anchor phone — Home / Welcome screen baked into iPhone 13 Pro
   frame. Upright (no rotation) so it reads as a natural iPhone mockup,
   height-constrained so it never touches the nav bar. Inset from the
   right edge with margin-right so it sits closer to the title. */
.project-hero-image--scanner img {
    position: relative;
    z-index: 3;
    max-width: 240px;
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.42));
    margin-right: 18%;
}

.project-hero-image--scanner .project-hero-title {
    color: #fff;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.project-hero-image--scanner .project-hero-category {
    display: block;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* Nav over scanner hero — same dark-red family as the hero,
   slightly darker so the menu bar reads distinct from the hero
   surface. */
body:has(.project-hero-image--scanner) .nav {
    background: rgba(97, 20, 27, 0.88);
}

body:has(.project-hero-image--scanner) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #a2222f;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:has(.project-hero-image--scanner) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--scanner) .nav a {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(245, 128, 143, 0.1);
    position: relative;
    z-index: 1;
}

body:has(.project-hero-image--scanner) .nav a:hover {
    color: #fff;
    background: rgba(245, 128, 143, 0.22);
}

body:has(.project-hero-image--scanner) .nav > * {
    position: relative;
    z-index: 1;
}

/* Scanner project accent — red-600 (#db2d3c), derived from the app's
   own Scan Receipt CTA. Applied to method tags, meta labels, TOC
   active, body strong, pipeline dots, etc. */
body:has(.project-hero-image--scanner) .meta-label {
    color: #db2d3c;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.07em;
}

body:has(.project-hero-image--scanner) .method-tags span {
    background: #db2d3c;
    color: #fff;
    font-weight: 600;
}

[data-theme="dark"] body:has(.project-hero-image--scanner) .method-tags span {
    background: #db2d3c;
    color: #fff;
}

body:has(.project-hero-image--scanner) .project-toc a.active {
    color: #db2d3c;
    border-bottom-color: #db2d3c;
}

body:has(.project-hero-image--scanner) .project-section-content strong {
    color: #db2d3c;
}

body:has(.project-hero-image--scanner) .project-sidebar {
    border-bottom-color: #db2d3c;
}

/* Scanner-scoped pipeline stage dots + tag num accent pick up
   red-600 too, so the pipeline lab-notebook aesthetic keeps its
   identity but in the scanner project's palette. */
body:has(.project-hero-image--scanner) .pipeline-stage-items--plain li::before {
    background: #db2d3c;
}

body:has(.project-hero-image--scanner) .pipeline-stage-tag-num {
    background: rgba(219, 45, 60, 0.09);
    color: #7a1922;
}

body:has(.project-hero-image--scanner) .pipeline-stage-tag-label {
    color: #3d0f14;
}

/* Three-phone workflow showcase — displays the real app screens in
   real iPhone frames, mapped 1:1 to the "Cesta jedné účtenky" steps
   below. Follows the vylet-mockups pattern: flex row of tall phones,
   hover-lift, scroll-reveal stagger. Scanner red accent on step
   numbers keeps the project identity. */
.scanner-showcase {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 2rem;
    /* Showcase je vytažen mimo .project-section-grid (label + content),
       takže může být centrovaný na .project-content (max-width 1100px)
       přímo. Auto margins horizontálně centrují. */
    margin: 1rem auto 2rem;
    max-width: 900px;
    width: 100%;
}

.scanner-showcase-title {
    margin: 0.5rem 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .scanner-showcase {
        gap: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.scanner-showcase-item {
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 420px;
    position: relative;
    padding: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.scanner-showcase-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.scanner-showcase .scanner-showcase-item:nth-child(1) { transition-delay: 0s; }
.scanner-showcase .scanner-showcase-item:nth-child(2) { transition-delay: 0.1s; }
.scanner-showcase .scanner-showcase-item:nth-child(3) { transition-delay: 0.2s; }

.scanner-showcase-phone {
    position: relative;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    height: 360px;
    width: auto;
    filter: drop-shadow(0 18px 28px rgba(61, 15, 20, 0.22));
}

.scanner-showcase-item:hover .scanner-showcase-phone {
    transform: translateY(-10px);
}

.scanner-showcase-caption {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    max-width: 260px;
    margin: 1rem auto 0;
}

.scanner-showcase-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #db2d3c;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.scanner-showcase-step-num {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    background: #db2d3c;
    color: #fff;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

[data-theme="dark"] .scanner-showcase-caption {
    color: #aaa;
}

@media (prefers-reduced-motion: reduce) {
    .scanner-showcase-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .scanner-showcase-item .scanner-showcase-phone,
    .scanner-showcase-item:hover .scanner-showcase-phone {
        transform: none;
        transition: none;
    }
}

@media (max-width: 900px) {
    .scanner-showcase {
        gap: 1rem;
    }
    .scanner-showcase-phone {
        height: 300px;
    }
    .scanner-showcase-caption {
        font-size: 0.82rem;
    }
}

@media (max-width: 640px) {
    .scanner-showcase {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .scanner-showcase-phone {
        height: 340px;
    }
}

@media (max-width: 768px) {
    .project-hero-image--scanner {
        padding: 1rem 1rem;
        padding-top: calc(50px + 0.5rem);
        margin-left: 0;
        padding-left: 1rem;
        width: 100%;
        min-height: 280px;
    }
    .project-hero-image--scanner .project-hero-title {
        font-size: 2rem;
    }
    .project-hero-image--scanner .project-hero-category {
        font-size: 0.7rem;
    }
    /* Hero phone: hide on narrow mobile so text has full width and
       canvas viewfinder animation stays legible without competing. */
    .project-hero-image--scanner img {
        display: none;
    }
}

/* ================================
   SYMPHERA HERO — project-4 (Symphera IS)
   Dark indigo gradient derived from the app's login page aesthetic
   (zinc-950 base + indigo/violet floating orbs). Enterprise-premium
   feel, sophisticated, matches the actual product design.
   Accent: #3730a3 (indigo-500) — vazba na login orb hues.
   ================================ */

.project-hero-image--symphera {
    background:
        /* Warm indigo glow za MacBook mockupem (vpravo) */
        radial-gradient(ellipse 800px 500px at 70% 50%,
            rgba(129, 140, 248, 0.18) 0%, transparent 60%),
        /* Deep violet shadow v protějším rohu */
        radial-gradient(ellipse 600px 400px at 15% 30%,
            rgba(0, 0, 0, 0.28) 0%, transparent 70%),
        /* Base gradient — dark indigo */
        linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

/* Subtile grid pattern — 80px × 80px, matches the actual Symphera
   login page's grid overlay (see login-branding.tsx). Reinforces the
   "enterprise dashboard" feel without competing with the hero image. */
.project-hero-image--symphera::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* Canvas particle animation — mirrors the actual product's login page
   (floating white dots + cursor-attracted spotlight + drifting orbs).
   Painted by setupSympheraParticles in js/app.js. */
.symphera-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.project-hero-image--symphera .project-hero-image__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
    gap: 2rem;
}

.project-hero-image--symphera .project-hero-image__text {
    flex: 1;
    max-width: 580px;
}

.project-hero-image--symphera .project-hero-title {
    color: #fff;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.project-hero-image--symphera .project-hero-category {
    display: block;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* MacBook mockup slot — when a client-anonymized mockup exists, place
   it here. Currently no mockup shown pending client permission. */
.project-hero-image--symphera img {
    position: relative;
    z-index: 3;
    max-width: 480px;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.55));
}

/* Text-only variant — text stays left-aligned (matches other project
   heroes), atmospheric dark background fills the right side naturally
   via the radial glow + grid overlay. */
.project-hero-image--text-only .project-hero-image__content {
    justify-content: flex-start;
}

/* Nav over Symphera hero — very dark indigo family, semi-transparent
   over hero, solid indigo-700 after scroll. */
body:has(.project-hero-image--symphera) .nav {
    background: rgba(30, 27, 75, 0.88);
}

body:has(.project-hero-image--symphera) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #1e1b4b;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:has(.project-hero-image--symphera) .nav.nav--solid::before {
    opacity: 1;
}

body:has(.project-hero-image--symphera) .nav a {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(129, 140, 248, 0.1);
    position: relative;
    z-index: 1;
}

body:has(.project-hero-image--symphera) .nav a:hover {
    color: #fff;
    background: rgba(129, 140, 248, 0.22);
}

body:has(.project-hero-image--symphera) .nav > * {
    position: relative;
    z-index: 1;
}

/* Symphera project accent — indigo-800 (#3730a3). Applied to method
   tags, meta labels, TOC active, body strong, sidebar border. */
body:has(.project-hero-image--symphera) .meta-label {
    color: #3730a3;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.07em;
}

body:has(.project-hero-image--symphera) .method-tags span {
    background: #3730a3;
    color: #fff;
    font-weight: 600;
}

[data-theme="dark"] body:has(.project-hero-image--symphera) .method-tags span {
    background: #3730a3;
    color: #fff;
}

body:has(.project-hero-image--symphera) .project-toc a.active {
    color: #3730a3;
    border-bottom-color: #3730a3;
}

body:has(.project-hero-image--symphera) .project-section-content strong {
    color: #3730a3;
}

body:has(.project-hero-image--symphera) .project-sidebar {
    border-bottom-color: #3730a3;
}

@media (max-width: 768px) {
    .project-hero-image--symphera {
        padding: 1rem 1rem;
        padding-top: calc(50px + 0.5rem);
        margin-left: 0;
        padding-left: 1rem;
        width: 100%;
        min-height: 280px;
    }
    .project-hero-image--symphera .project-hero-title {
        font-size: 2rem;
    }
    .project-hero-image--symphera .project-hero-category {
        font-size: 0.7rem;
    }
    .project-hero-image--symphera img {
        display: none;
    }
}

/* ================================
   SYMPHERA ARCHITECTURE DIAGRAM
   Full-width breakout hub-and-spoke SVG in the Řešení section.
   Extension of the constellation aesthetic — dark indigo bg,
   glowing nodes, bidirectional links. Rendered inline in HTML,
   this wrapper handles spacing + card shadow.
   ================================ */

.symphera-architecture {
    max-width: 900px;
    margin: 2rem auto 2.5rem;
    padding: 0 1rem;
}

.symphera-architecture svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Whiteboard variant — office whiteboard s tenkým silver rámem, 4 black
   plastic corner brackets (jako iStock reference), a small marker tray
   uprostřed dole se dvěma červenými fixy. */
.symphera-architecture--whiteboard .whiteboard-frame {
    position: relative;
    padding: 12px;
    background:
        linear-gradient(180deg, #e4e4e7 0%, #d4d4d8 45%, #b4b4b8 100%);
    border-radius: 3px;
    margin-bottom: 24px;   /* room pro pen tray */
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.22),
        0 8px 16px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* 4 black plastic corner brackets — chunky L-shapes, wrapping the corners */
.symphera-architecture--whiteboard .wb-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    background:
        linear-gradient(135deg, #3f3f46 0%, #18181b 55%, #09090b 100%);
    z-index: 3;
    box-shadow:
        inset -1px -1px 2px rgba(0, 0, 0, 0.6),
        inset 1px 1px 1px rgba(255, 255, 255, 0.10);
}

.symphera-architecture--whiteboard .wb-corner--tl {
    top: -1px; left: -1px;
    border-radius: 4px 0 12px 0;
}
.symphera-architecture--whiteboard .wb-corner--tr {
    top: -1px; right: -1px;
    border-radius: 0 4px 0 12px;
}
.symphera-architecture--whiteboard .wb-corner--bl {
    bottom: -1px; left: -1px;
    border-radius: 0 12px 0 4px;
}
.symphera-architecture--whiteboard .wb-corner--br {
    bottom: -1px; right: -1px;
    border-radius: 12px 0 4px 0;
}

/* Marker tray — small centered bottom protrusion with 2 red pens */
.symphera-architecture--whiteboard .wb-tray {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 16px;
    background:
        linear-gradient(180deg, #a1a1aa 0%, #71717a 55%, #52525b 100%);
    border-radius: 0 0 3px 3px;
    z-index: 2;
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.28),
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -1px 2px rgba(0, 0, 0, 0.20);
}

/* Two red markers visible in the tray */
.symphera-architecture--whiteboard .wb-tray::before {
    content: '';
    position: absolute;
    top: 4px; left: 22px;
    width: 42px;
    height: 4px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.3);
}

.symphera-architecture--whiteboard .wb-tray::after {
    content: '';
    position: absolute;
    top: 4px; right: 22px;
    width: 42px;
    height: 4px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.3);
}

/* Whiteboard surface — čistě bílá s velmi jemným reflex-gradientem */
.symphera-architecture--whiteboard .whiteboard-frame svg {
    display: block;
    background:
        linear-gradient(135deg, #ffffff 0%, #fafafa 60%, #f4f4f5 100%);
    border-radius: 1px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 -1px 2px rgba(0, 0, 0, 0.03);
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
}

/* Caption sedí POD frame, ne uvnitř. Whiteboard box-shadow sahá až
   72px dolů (24px offset + 48px blur), takže margin musí být větší,
   aby caption nebyl pod stínem. */
.symphera-architecture--whiteboard figcaption {
    margin-top: 5rem;
}

.symphera-architecture figcaption {
    max-width: 640px;
    margin: 1.5rem auto 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
    text-align: center;
}

.symphera-architecture figcaption strong {
    color: #3730a3;
}

@media (max-width: 640px) {
    .symphera-architecture {
        padding: 0 0.5rem;
    }
    .symphera-architecture figcaption {
        font-size: 0.82rem;
    }
}

/* Screenshot showcase — 4 MacBook Air mockupy jako 2x2 grid v Funkce
   sekci. Hover zvětší mockup a přidá deeper shadow. */
.symphera-screenshots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2.5rem auto 1rem;
    max-width: 920px;
    padding: 0 1rem;
}

.symphera-screenshot {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.symphera-screenshot img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 440px;
    cursor: zoom-in;
    filter: drop-shadow(0 14px 24px rgba(15, 13, 46, 0.18));
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.35s ease;
}

.symphera-screenshot:hover img {
    transform: translateY(-4px);
    filter: drop-shadow(0 20px 32px rgba(15, 13, 46, 0.26));
}

.symphera-screenshot figcaption {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
    max-width: 340px;
}

@media (max-width: 720px) {
    .symphera-screenshots {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Symphera card hover on apps.html — uses dark indigo (matches hero
   base) instead of bio's teal. */
a.project-detail.project-detail--symphera:hover,
a.project-detail.project-detail--symphera:focus-visible {
    background: #1e1b4b;
}

a.project-detail.project-detail--symphera:focus-visible {
    box-shadow:
        0 0 0 3px rgba(129, 140, 248, 0.55),
        0 6px 16px rgba(30, 27, 75, 0.22),
        0 16px 36px rgba(30, 27, 75, 0.18);
    outline: none;
}

a.project-detail.project-detail--symphera:hover {
    box-shadow:
        0 6px 16px rgba(30, 27, 75, 0.22),
        0 16px 36px rgba(30, 27, 75, 0.18);
}

a.project-detail.project-detail--symphera:hover .project-detail-tags span,
a.project-detail.project-detail--symphera:focus-visible .project-detail-tags span {
    background: #ffffff;
    color: #1e1b4b;
}

/* ===========================================================
   Project: Pachinko Idle — neon cyberpunk (magenta/cyan)
   Accent: #ff00aa  |  Hero base: #050510 → #1a0a2e
   =========================================================== */

.project-hero-image--pachinko {
    background:
        radial-gradient(ellipse 700px 400px at 75% 45%,
            rgba(255, 0, 170, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 500px 350px at 20% 70%,
            rgba(0, 255, 255, 0.14) 0%, transparent 65%),
        linear-gradient(135deg, #1a0a2e 0%, #050510 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem;
    padding-top: calc(50px + 2rem);
    margin-left: calc(-180px - 2rem);
    padding-left: calc(180px + 2rem);
    width: calc(100% + 180px + 2rem);
    height: 460px;
    box-sizing: border-box;
}

/* Subtle scanline grid overlay */
.project-hero-image--pachinko::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 0, 170, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.project-hero-image--pachinko .pachinko-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.project-hero-image--pachinko .project-hero-image__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.project-hero-image--pachinko .project-hero-title {
    color: #fff;
    font-size: 3.5rem;
    text-shadow:
        0 0 12px rgba(255, 0, 170, 0.6),
        0 0 32px rgba(255, 0, 170, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    letter-spacing: 0.04em;
}

.project-hero-image--pachinko .project-hero-category {
    color: rgba(0, 255, 255, 0.85);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    display: block;
    text-align: center;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .project-hero-image--pachinko {
        padding: 1rem;
        padding-top: calc(50px + 0.5rem);
        margin-left: 0;
        padding-left: 1rem;
        width: 100%;
        min-height: 320px;
        height: auto;
    }
    .project-hero-image--pachinko .project-hero-title {
        font-size: 2rem;
    }
}

/* Nav overlay */
body:has(.project-hero-image--pachinko) .nav {
    background: rgba(10, 5, 20, 0.7);
}
body:has(.project-hero-image--pachinko) .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff00aa;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body:has(.project-hero-image--pachinko) .nav.nav--solid::before {
    opacity: 1;
}
body:has(.project-hero-image--pachinko) .nav a {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 0, 170, 0.14);
    position: relative;
    z-index: 1;
}
body:has(.project-hero-image--pachinko) .nav a:hover {
    color: #fff;
    background: rgba(255, 0, 170, 0.28);
}
body:has(.project-hero-image--pachinko) .nav > * {
    position: relative;
    z-index: 1;
}

/* Accent color propagation */
body:has(.project-hero-image--pachinko) .method-tags span {
    background: #ff00aa;
    color: #fff;
}
body:has(.project-hero-image--pachinko) .meta-label {
    color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .project-toc a.active {
    color: #ff00aa;
    border-bottom-color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .project-sidebar {
    border-bottom-color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .scroll-to-top {
    background: #ff00aa;
    color: #fff;
}
body:has(.project-hero-image--pachinko) .stat-number {
    color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .project-section-content strong {
    color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .project-nav-link:hover .project-nav-title {
    color: #ff00aa;
}
body:has(.project-hero-image--pachinko) .pipeline-stage-tag-num,
body:has(.project-hero-image--pachinko) .pipeline-stage-count {
    color: #ff00aa;
}

/* Playable embed — full-width breakout so 1040px game fits */
.pachinko-embed {
    margin: 2rem calc(50% - 50vw) 0;
    padding: 0 max(1rem, calc(50vw - 640px));
    background: transparent;
}
.pachinko-embed-frame {
    background: #050510;
    border: 1px solid rgba(255, 0, 170, 0.4);
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        0 0 24px rgba(255, 0, 170, 0.15),
        0 12px 32px rgba(0, 0, 0, 0.35);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
.pachinko-embed iframe {
    display: block;
    width: 100%;
    height: 940px;
    border: 0;
    background: #050510;
}
.pachinko-embed figcaption {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    background: #0a0518;
    border-top: 1px solid rgba(255, 0, 170, 0.25);
    text-align: center;
}
.pachinko-embed figcaption a {
    color: #ff00aa;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 0, 170, 0.6);
}
.pachinko-embed figcaption a:hover {
    color: #fff;
    border-bottom-color: #fff;
}
@media (max-width: 1100px) {
    .pachinko-embed iframe {
        height: 900px;
    }
}
@media (max-width: 768px) {
    .pachinko-embed {
        margin: 2rem 0 0;
        padding: 0;
    }
    .pachinko-embed iframe {
        height: 720px;
    }
}

/* ===========================================================
   games.html card: Pachinko mockup + hover accent
   =========================================================== */
.project-mockup--pachinko {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #050510 100%);
    border-radius: 6px;
    overflow: hidden;
    padding: 1rem;
    filter: grayscale(60%);
    transition: filter 0.3s ease;
}
a.project-detail:hover .project-mockup--pachinko {
    filter: grayscale(0%);
}
.pachinko-mock-frame {
    position: relative;
    width: 180px;
    height: 180px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    align-items: center;
    justify-items: center;
}
.pachinko-mock-peg {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff00aa;
    box-shadow: 0 0 6px rgba(255, 0, 170, 0.7);
}
.pachinko-mock-peg--gold {
    background: #ffdd44;
    box-shadow: 0 0 8px rgba(255, 221, 68, 0.9);
}
.pachinko-mock-ball {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.9);
    animation: pachinko-mock-fall 3s ease-in infinite;
}
@keyframes pachinko-mock-fall {
    0% { top: -12px; opacity: 0; }
    10% { opacity: 1; }
    40% { top: 80px; }
    60% { top: 140px; transform: translateX(-30%); }
    100% { top: 190px; opacity: 0; transform: translateX(-50%); }
}

a.project-detail.project-detail--pachinko:hover,
a.project-detail.project-detail--pachinko:focus-visible {
    background: #1a0a2e;
    color: #fff;
}
a.project-detail.project-detail--pachinko:hover .project-detail-title,
a.project-detail.project-detail--pachinko:focus-visible .project-detail-title,
a.project-detail.project-detail--pachinko:hover .project-detail-desc,
a.project-detail.project-detail--pachinko:focus-visible .project-detail-desc,
a.project-detail.project-detail--pachinko:hover .project-detail-number,
a.project-detail.project-detail--pachinko:focus-visible .project-detail-number {
    color: #fff;
}
a.project-detail.project-detail--pachinko:hover .project-detail-tags span,
a.project-detail.project-detail--pachinko:focus-visible .project-detail-tags span {
    background: #ff00aa;
    color: #fff;
}
a.project-detail.project-detail--pachinko:hover {
    box-shadow:
        0 6px 16px rgba(255, 0, 170, 0.22),
        0 16px 36px rgba(255, 0, 170, 0.18);
}

/* ===========================================================
   Pachinko: iteration cards (neon terminal aesthetic)
   Vlastní pattern — nesdílí identity s bio pipeline
   =========================================================== */
.iter-cards {
    list-style: none;
    padding: 0;
    margin: 2rem 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    counter-reset: iter;
}
.iter-card {
    position: relative;
    background: linear-gradient(180deg, #0d0725 0%, #050510 100%);
    border: 1px solid rgba(255, 0, 170, 0.35);
    border-radius: 6px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow:
        inset 0 0 0 1px rgba(0, 255, 255, 0.05),
        0 4px 16px rgba(0, 0, 0, 0.3);
    counter-increment: iter;
    overflow: hidden;
}
.iter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 0, 170, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.6;
}
.iter-card > * { position: relative; z-index: 1; }

.iter-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(255, 0, 170, 0.25);
}
.iter-card-version {
    color: rgba(0, 255, 255, 0.75);
    font-weight: 500;
}
.iter-card-tag {
    color: #ff00aa;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 0, 170, 0.5);
}

.iter-card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}
.iter-card-count {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #ff00aa;
    text-shadow:
        0 0 12px rgba(255, 0, 170, 0.6),
        0 0 24px rgba(255, 0, 170, 0.3);
    font-family: 'Space Grotesk', monospace;
    font-variant-numeric: tabular-nums;
}
.iter-card-count-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.iter-card-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.iter-card-items li {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.iter-card-items li:first-child { border-top: 0; }
.iter-card-items b {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.iter-card-items span {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .iter-card-count { font-size: 2.4rem; }
    .iter-card-items { font-size: 0.8rem; }
}

/* ===========================================================
   Pachinko: dark mode overrides
   Hero + card už jsou natively dark, ale content section
   potřebuje mít barvy laděné pro tmavé pozadí
   =========================================================== */
[data-theme="dark"] body:has(.project-hero-image--pachinko) .iter-card {
    background: linear-gradient(180deg, #150a30 0%, #08081a 100%);
    border-color: rgba(255, 0, 170, 0.45);
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .iter-card-items b {
    color: #fff;
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .iter-card-items li {
    border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .pachinko-embed-frame {
    border-color: rgba(255, 0, 170, 0.5);
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .method-tags span {
    background: #ff00aa;
    color: #fff;
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .meta-label {
    color: #ff4dc7;
}
[data-theme="dark"] body:has(.project-hero-image--pachinko) .stat-number,
[data-theme="dark"] body:has(.project-hero-image--pachinko) .project-section-content strong {
    color: #ff4dc7;
}