/*
Theme Name: Quackweb
Theme URI: https://quackweb.pl
Author: Quackweb Sp. z o.o.
Author URI: https://quackweb.pl
Description: Nowoczesny motyw OnePage dla agencji Quackweb - strony internetowe, aplikacje mobilne, rozwiązania AI, kampanie reklamowe
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quackweb
*/

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Matches YOOtheme's own `html { font-size: 15px }` (theme.1.css) — that stylesheet
   only loads on pages with a YOOtheme builder layout assigned, which case-study pages
   (rendered via template_include, no YOOtheme layout) never get. Without this, every
   rem-based size on this file computes ~6.7% larger there than on the homepage. */
html {
    font-size: 15px;
}

:root {
    --color-dark: #0f0f0f;
    --color-dark-rgb: 15, 15, 15;
    --color-navy: #1a1a1a;
    --color-gray: #2d2d2d;
    --color-yellow: #d4af37;
    --color-yellow-hover: #e8c547;
    --color-white: #ffffff;
    --color-text-light: #a0a0a0;
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== VIEW TRANSITIONS API ===== */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation-name: theme-fade-out;
}

::view-transition-new(root) {
    animation-name: theme-circle-in;
}

/* Fade out stary motyw */
@keyframes theme-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Circle reveal od przycisku */
@keyframes theme-circle-in {
    from {
        clip-path: circle(0% at var(--circle-x, 50%) var(--circle-y, 50%));
    }
    to {
        clip-path: circle(150% at var(--circle-x, 50%) var(--circle-y, 50%));
    }
}

/* Fallback dla przeglądarek bez clip-path */
@supports not (clip-path: circle(0%)) {
    @keyframes theme-circle-in {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark);
    color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
}

/* ===== CUSTOM CURSOR ===== */
.custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-yellow);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    will-change: left, top;
}

.custom-cursor.hover {
    width: 50px;
    height: 50px;
    background-color: rgba(212, 175, 55, 0.2);
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-yellow), var(--color-yellow-hover));
    z-index: 9998;
    transition: width 0.1s ease;
}

/* ===== STICKY NAVIGATION ===== */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem 5%;
    /* Fully opaque — no alpha gradient, no backdrop-filter blur. The see-through
       look was most noticeable during the slide-up/slide-down hide animation. */
    background: rgb(var(--color-dark-rgb, 15, 15, 15));
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    z-index: 9997;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav.scrolled {
    padding: 0.8rem 5%;
    background: rgb(var(--color-dark-rgb, 15, 15, 15));
    border-bottom-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-yellow);
    text-decoration: none;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
    position: relative;
    padding: 0;
}

.duck-logo,
.logo-image {
    width: 40px;
    height: 40px;
    color: var(--color-yellow);
    transition: transform 0.3s ease;
}

.logo-image {
    object-fit: contain;
    display: block;
    margin-right: 0.5rem;
}

.beak-top,
.beak-bottom {
    transition: d 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo:hover .duck-logo {
    animation: quack 0.5s ease-in-out;
}

@keyframes quack {
    0% {
        transform: scale(1) rotateZ(0deg);
    }
    25% {
        transform: scale(1.1) rotateZ(-5deg);
    }
    50% {
        transform: scale(1.15) rotateZ(5deg);
    }
    75% {
        transform: scale(1.1) rotateZ(-3deg);
    }
    100% {
        transform: scale(1) rotateZ(0deg);
    }
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.logo-quack {
    color: var(--color-yellow);
    font-weight: 800;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

.logo-web {
    color: var(--color-white);
    font-weight: 800;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

.logo::before,
.logo::after,
.logo-text::before,
.logo-text::after,
.logo-quack::before,
.logo-quack::after,
.logo-web::before,
.logo-web::after {
    display: none !important;
    content: '' !important;
}

.logo:hover {
    transform: scale(1.55);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
}

.nav-menu {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

/* Ukryj hamburger na desktopie */
@media (min-width: 1181px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .nav-menu {
        display: flex !important;
    }
}

.nav-menu a {
    color: var(--color-white);
    opacity: 0.85;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
    padding: 8px 4px;
    border-radius: 0;
}

.nav-menu a::before {
    display: none;
}

/* Dot-underline: pojawia się jako złota kropka pod linkiem */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-yellow);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
    opacity: 0;
    display: block;
}

.nav-menu a:hover {
    color: var(--color-yellow);
    opacity: 1;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.nav-menu a:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ===== MOBILE MENU BUTTON ===== */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    gap: 5px;
    padding: 0;
}

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

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translateY(12px);
}

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

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-12px);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    width: 45px;
    height: 45px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: var(--color-yellow);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.theme-toggle:focus {
    outline: none;
}

.theme-toggle:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
}

/* ===== SECTIONS BASE ===== */
section {
    padding: 120px 5%;
    min-height: 100vh;
    position: relative;
}

.section-container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: var(--color-yellow) !important;
    animation: titleBreathing 4s ease-in-out infinite !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
}

@keyframes titleBreathing {
    0%, 100% { 
        opacity: 1;
        transform: translateY(0);
    }
    50% { 
        opacity: 0.85;
        transform: translateY(-3px);
    }
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: 3rem;
}

/* ===== HERO SECTION ===== */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 100px 5% 80px 5%;
    min-height: 100vh;
    box-sizing: border-box;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%);
    z-index: 1;
}

.hero-background canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-background::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: none;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 0 1rem;
    max-width: 900px;
    margin: -80px auto 0 auto;
    width: 100%;
}

.hero-description {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--color-text-light);
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.cta-button {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 320px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
    transform-origin: center center;
}

.cta-button span {
    position: relative;
    z-index: 2;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--color-yellow-hover);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.cta-button:hover::before {
    width: 500px;
    height: 500px;
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.6) !important,
                0 10px 25px rgba(212, 175, 55, 0.4) !important;
}

.cta-button:active {
    transform: translateY(-3px) scale(1.02) !important;
    transition: all 0.1s ease !important;
}

.cta-button {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-secondary {
    background: linear-gradient(135deg, var(--color-yellow), var(--color-yellow-hover));
}

/* ===== HERO CONTENT LAYOUT ===== */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 0;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== ABOUT SECTION ===== */
#about {
    background-color: var(--color-navy);
}

.about-content {
    text-align: center;
    margin-bottom: 4rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    transition: var(--transition-smooth);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.stat-item:hover {
    transform: translateY(-10px);
    border-color: var(--color-yellow);
    background: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.15);
}

.stat-number {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-yellow);
    margin-bottom: 0.5rem;
}

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

/* ===== SERVICES SECTION ===== */
#services {
    background-color: var(--color-dark);
}

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

.service-card {
    background: linear-gradient(135deg, 
        rgba(var(--color-navy-rgb, 26, 26, 26), 0.9), 
        rgba(var(--color-gray-rgb, 45, 45, 45), 0.7));
    padding: 3rem 2rem;
    border-radius: 24px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(var(--color-yellow-rgb, 212, 175, 55), 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--color-yellow-rgb, 212, 175, 55), 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

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

.service-card:hover {
    transform: translateY(-12px);
    border-color: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.4);
    box-shadow: 0 20px 60px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.3),
                0 0 40px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.2),
                inset 0 0 30px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.05);
    background: linear-gradient(135deg, 
        rgba(var(--color-navy-rgb, 26, 26, 26), 1), 
        rgba(var(--color-gray-rgb, 45, 45, 45), 0.9));
}

.service-icon {
    font-size: 3rem;
    color: var(--color-yellow);
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.service-description {
    color: var(--color-text-light);
    line-height: 1.8;
}

@media (max-width: 768px) {
  .service-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.6rem 1rem;
    align-items: start;
    padding: 1.4rem 1rem;
  }

  .service-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 2.4rem;
  }

  .service-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.1;
    align-self: center;
  }

  .service-description {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: var(--color-text-light);
  }

  .service-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ===== PORTFOLIO SECTION ===== */
#portfolio {
    background-color: var(--color-navy);
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.8rem 2rem;
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-gray);
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    border-color: var(--color-yellow);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    height: 400px;
    background: var(--color-gray);
    border: 1px solid rgba(var(--color-yellow-rgb, 212, 175, 55), 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.4);
    box-shadow: 0 20px 60px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.25),
                0 0 40px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.15);
}

.portfolio-item:hover img {
    transform: scale(1.15);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, 
        rgba(var(--color-dark-rgb, 15, 15, 15), 0.95), 
        transparent);
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}

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

.portfolio-category {
    color: var(--color-text-light);
}

/* ===== PREMIUM PORTFOLIO CARDS ===== */
.portfolio-grid.premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.portfolio-card {
    position: relative;
    cursor: pointer;
    animation: portfolioBreathing 5.5s ease-in-out infinite;
}

@keyframes portfolioBreathing {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-6px); opacity: 0.98; }
}

.portfolio-card-inner {
    position: relative;
    border: 1px solid rgba(var(--color-yellow-rgb, 212, 175, 55), 0.2);
    background: rgba(var(--color-navy-rgb, 26, 26, 26), 0.5);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.portfolio-card-inner:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.5);
    box-shadow: 0 20px 40px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.2);
}

.portfolio-image-section {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, 
        rgba(var(--color-navy-rgb, 26, 26, 26), 1), 
        rgba(var(--color-gray-rgb, 45, 45, 45), 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.portfolio-emoji {
    font-size: 5rem;
    animation: emojiFloat 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes emojiFloat {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.portfolio-card-inner:hover .portfolio-emoji {
    transform: scale(1.3) rotate(10deg);
}

.portfolio-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, 
        rgba(var(--color-dark-rgb, 15, 15, 15), 0.8), 
        transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.portfolio-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portfolio-category-tag {
    color: var(--color-yellow);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.portfolio-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.portfolio-card-inner:hover .portfolio-card-title {
    color: var(--color-yellow);
}

.portfolio-card-description {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

.portfolio-results-badge {
    display: inline-block;
    padding: 0.75rem 1rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.portfolio-results-badge p {
    color: var(--color-yellow);
    font-weight: 600;
    font-size: 0.9rem;
}

.portfolio-card-inner:hover .portfolio-results-badge {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
}

.portfolio-accent-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(to right, var(--color-yellow), var(--color-yellow-hover));
    transition: width 0.3s ease;
}

.portfolio-card-inner:hover .portfolio-accent-line {
    width: 100%;
}

/* ===== AI ZONE SECTION ===== */
#ai-zone {
    background-color: var(--color-dark);
    position: relative;
    overflow: hidden;
}

.ai-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 1;
}

.ai-background canvas {
    width: 100%;
    height: 100%;
}

.ai-content {
    position: relative;
    z-index: 2;
}

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

.ai-project-card {
    background: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.05);
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid rgba(var(--color-yellow-rgb, 212, 175, 55), 0.2);
    transition: var(--transition-smooth);
}

.ai-project-card:hover {
    background: rgba(var(--color-yellow-rgb, 212, 175, 55), 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.2);
}

.ai-project-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-yellow);
    margin-bottom: 1rem;
}

.ai-project-description {
    color: var(--color-text-light);
    line-height: 1.8;
}

#ai-zone .section-title,
#ai-zone .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

#ai-zone .ai-project-title {
    text-align: center !important;
}

/* ===== CLIENTS SECTION ===== */
#clients {
    background-color: var(--color-navy);
    min-height: auto;
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
}

.clients-intro {
    text-align: left;
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 4rem;
}

.clients-marquee {
    --gap: clamp(3.5rem, 8vw, 8rem);
    --logo-w: clamp(120px, 12vw, 220px);
    --fade-w: 120px;
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-w),
                        #000 calc(100% - var(--fade-w)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--fade-w),
                        #000 calc(100% - var(--fade-w)), transparent);
}

.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: marquee var(--marquee-duration, 40s) linear infinite;
}

.clients-marquee.paused .marquee-track,
.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

.client-logo {
    flex: 0 0 var(--logo-w);
    width: var(--logo-w);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0;
    transition: transform .35s ease, opacity .35s ease;
    will-change: transform, opacity;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.client-logo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: grayscale(100%) contrast(1.05) brightness(.95);
    opacity: .8;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;

}

.client-logo:hover {
    transform: scale(1.03);
    background: transparent !important;
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
}

.client-logo:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
}

.clients-marquee.reverse .marquee-track {
    animation-direction: reverse;
}

@media (max-width: 768px) {
    .clients-marquee { --fade-w: 40px; }
    .client-logo img { opacity: .9; }
}

/* =======================
   CONTACT SECTION — FULL FIX
   ======================= */

#contact {
    background-color: var(--color-dark);
    overflow-x: hidden;
    max-width: 100vw;
}

#contact .section-container {
    overflow: hidden;
    max-width: 100%;
}

/* Nagłówek sekcji — wycentrowany jak w pozostałych sekcjach */
.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-header .section-title {
    margin-bottom: 1rem !important;
}

.contact-header .section-subtitle {
    margin-bottom: 0;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.contact-info h3 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--color-yellow);
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-light);
    word-break: break-word;
    max-width: 100%;
}

.contact-item i {
    width: 28px;
    min-width: 28px;
    display: inline-flex;
    justify-content: center;
    color: var(--color-yellow);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.social-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.8rem;
    color: var(--color-yellow);
}

.social-links {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(1, auto);
    gap: 1.8rem 2.9rem;
    justify-content: start;
    align-items: center;
    margin-left: 0;
    max-width: 100%;
}

.social-link {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.08);
    border: 2px solid rgba(212, 175, 55, 0.28);
    border-radius: 50%;
    color: var(--color-yellow);
    font-size: 1.5rem;
    transition: var(--transition-smooth);
    text-decoration: none;
    box-shadow: none;
    flex-shrink: 0;
}

.social-link:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.social-link:focus {
    outline: 3px solid rgba(212,175,55,0.18);
    outline-offset: 3px;
}

.contact-form {
    margin-top: 0;
    background: rgba(var(--color-navy-rgb, 26, 26, 26), 0.6);
    padding: 3rem;
    border-radius: 20px;
    border: 2px solid rgba(var(--color-yellow-rgb, 212, 175, 55), 0.1);
    max-width: 100%;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 2rem;
    position: relative;
    max-width: 100%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.2rem;
    background: rgba(var(--color-white-rgb, 255, 255, 255), 0);
    border: 2px solid rgba(var(--color-white-rgb, 255, 255, 255), 0.08);
    border-radius: 10px;
    color: var(--color-white);
    font-size: 1rem;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100%;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(var(--color-yellow-rgb, 212, 175, 55), 0.18);
}

.form-group label {
    position: absolute;
    left: 1.2rem;
    top: 1.25rem;
    color: var(--color-text-light);
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 3;
    background: transparent;
    padding: 0 0.35rem;
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -1.5rem;
    left: 0.9rem;
    font-size: 0.78rem;
    color: var(--color-yellow);
    background: transparent;
    padding: 0 0.5rem;
    transform-origin: left center;
}

.form-group textarea {
    min-height: 220px;
    resize: vertical;
    padding-top: 1.15rem;
}

.submit-btn {
    width: 100%;
    padding: 1.2rem;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.submit-btn:hover {
    background-color: var(--color-yellow-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

/* ===== CONTACT RESPONSIVE ===== */
@media (max-width: 1024px) {
    #contact {
        padding: 80px 5% 60px 5%;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title cta"
            "details social";
        gap: 2rem 3rem;
        align-items: start;
    }

    .contact-info h3 {
        grid-area: title;
        margin-bottom: 1.2rem;
    }

    .contact-details {
        grid-area: details;
        margin-bottom: 1.4rem;
    }

    .social-title {
        margin-bottom: 1rem;
    }

    .social-links {
		grid-template-columns: repeat(3, 50px) !important;
        grid-area: social;
        gap: 1.4rem;
    }

    .contact-form {
        margin-top: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Reset grid z 1024px — wracamy do single column */
    .contact-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .contact-details {
        margin-bottom: 0.5rem;
        width: 100%;
    }

    /* Kontakt items — nie wylewają się */
    .contact-item {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: hidden;
    }

    .contact-item span,
    .contact-item a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
        display: inline-block;
        font-size: 0.95rem;
    }

    .social-title {
        color: var(--color-yellow);
        text-align: left;
        margin-bottom: 1rem;
    }

    .social-links {
        display: grid !important;
        grid-template-columns: repeat(3, 50px) !important;
        gap: 1rem !important;
        justify-content: start !important;
        margin-bottom: 0;
        width: auto;
    }

    .social-link {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .contact-form {
        padding: 2rem;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 500px) {
    .contact-container {
        gap: 2rem;
        padding: 0;
        overflow: hidden;
    }

    .contact-item span,
    .contact-item a {
        font-size: 0.9rem;
    }

    .social-links {
        gap: 0.8rem !important;
		display: flex;
  		justify-content: center;
  		align-items: center;
    }

    .social-link {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 1rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 420px) {
    #contact {
        padding-left: 0;
        padding-right: 0;
    }

    .contact-container {
        padding-left: clamp(14px, 5vw, 22px);
        padding-right: clamp(14px, 5vw, 22px);
        box-sizing: border-box;
        width: 100%;
    }

    .contact-info {
        gap: 1.2rem;
    }

    .contact-info h3,
    .social-title {
        font-size: 1.15rem;
        line-height: 1.15;
    }

    .contact-item {
        gap: 0.6rem;
        font-size: 0.9rem;
        max-width: 100%;
    }

    .contact-item i {
        font-size: 1.15rem;
        width: 22px;
        min-width: 22px;
    }

    .social-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9rem;
        max-width: 100%;
    }

    .social-link {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }

    .contact-form {
        padding: 1.4rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        font-size: 0.9rem;
        padding: 0.9rem;
        box-sizing: border-box;
    }
}

/* ===== FOOTER ===== */
footer {
    background-color: var(--color-navy);
    padding: 3rem 5%;
    text-align: center;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-tagline {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-yellow);
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

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

.footer-copyright {
    color: var(--color-text-light);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 768px) {
    footer {
        padding: 2rem 5%;
    }
    
    .footer-tagline {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .footer-links {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .footer-copyright {
        font-size: 0.8rem;
    }
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.95);
    z-index: 10000;
    overflow-y: auto;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--color-navy);
    padding: 3rem;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    position: relative;
    animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    color: var(--color-yellow);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close:hover {
    transform: rotate(90deg);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }
}

/* ===== NAVBAR MOBILE — od 1180px ===== */
@media (max-width: 1180px) {
    .main-nav {
        padding: 1rem 5%;
        position: fixed;
    }

    .nav-container {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        width: 100%;
    }

    .logo {
        flex: 1;
        text-align: center;
    }

    .mobile-menu-btn {
        display: flex;
        position: absolute;
        right: 4rem;
    }

    .theme-toggle {
        position: absolute;
        right: 1rem;
        margin-left: 0;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0 !important;
        flex-direction: column;
        width: 100%;
        background: rgba(var(--color-dark-rgb), 0.98);
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        gap: 0;
        font-size: 0.9rem;
        padding: 1rem 0;
        border-radius: 0;
    }

    .nav-menu.active {
        display: flex;
        animation: slideDownMenu 0.4s ease-out forwards;
    }

    .nav-menu li {
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }

    .nav-menu a {
        display: block;
        padding: 1rem 1.5rem;
        border-radius: 0;
    }

    .nav-menu a::after {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        cursor: auto;
    }

    .custom-cursor,
    .mouse-follower {
        display: none !important;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    .hero-description {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
        gap: 1rem;
    }

    .cta-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        max-width: 350px;
        text-align: center;
    }

    section {
        padding: 60px 5%;
        min-height: 100vh;
    }

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

    .section-subtitle {
        font-size: 1rem;
    }

    .services-grid,
    .portfolio-grid,
    .ai-projects {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

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

    .service-card {
        padding: 2rem 1.5rem;
        transform: none !important;
    }

    .service-card:hover {
        transform: translateY(-5px) !important;
    }

    .portfolio-item {
        height: 300px;
    }

    .contact-container {
        gap: 2rem;
    }

    .contact-form {
        padding: 2rem;
    }

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

    .social-links {
        justify-content: center;
    }

    .section-title,
    .hero-title .highlight,
    .service-icon {
        animation: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    img {
        will-change: auto;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

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

    .nav-menu {
        font-size: 0.8rem;
        gap: 0.5rem;
    }

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

    .contact-container {
        gap: 1.5rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.slide-up {
    opacity: 0;
    transform: translateY(50px);
    animation: slideUp 0.8s ease forwards;
}

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

.loader {
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-top: 3px solid var(--color-yellow);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== PAGE TEMPLATE STYLES ===== */
.page-hero-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 100px;
    margin-bottom: 4rem;
}

.case-hero {
    align-items: flex-start;
    padding-top: 140px !important;
}

.page-hero-section .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.page-hero-section .hero-content {
    text-align: center;
    max-width: 900px;
    padding: 0 2rem;
    z-index: 1;
}

.page-hero-section .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease-out;
}

.page-hero-section .hero-description {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.page-content-section {
    padding: 4rem 0;
    min-height: 50vh;
}

.page-article {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.4) 0%, rgba(26, 26, 26, 0.6) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.6s ease-out;
}

.page-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.page-featured-image {
    margin-bottom: 2rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.page-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.page-featured-image:hover img {
    transform: scale(1.05);
}

.page-text-content {
    color: var(--color-white);
    line-height: 1.8;
}

.page-text-content h1,
.page-text-content h2,
.page-text-content h3,
.page-text-content h4,
.page-text-content h5,
.page-text-content h6 {
    color: var(--color-yellow);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.page-text-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--color-yellow);
    padding-bottom: 0.5rem;
    margin-top: 3rem;
}

.page-text-content h3 {
    font-size: 1.5rem;
}

.page-text-content p {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.page-text-content a {
    color: var(--color-yellow);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition-smooth);
}

.page-text-content a:hover {
    color: var(--color-yellow-hover);
    border-bottom-color: var(--color-yellow-hover);
}

.page-text-content ul,
.page-text-content ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.page-text-content li {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.page-text-content blockquote {
    border-left: 4px solid var(--color-yellow);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--color-text-light);
}

.page-text-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.page-text-content code {
    background: rgba(212, 175, 55, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--color-yellow);
}

.page-text-content pre {
    background: rgba(26, 26, 26, 0.8);
    padding: 1.5rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 2rem 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.page-text-content pre code {
    background: none;
    padding: 0;
}

.child-pages-grid {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(212, 175, 55, 0.2);
}

.child-pages-title {
    font-size: 1.8rem;
    color: var(--color-yellow);
    margin-bottom: 2rem;
    font-weight: 700;
}

.page-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.3) 0%, rgba(26, 26, 26, 0.5) 100%);
    margin-top: 4rem;
}

.page-cta-section .cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.page-cta-section .section-title {
    margin-bottom: 1rem;
}

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

.page-edit-link {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.edit-link a {
    color: var(--color-yellow);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-yellow);
    border-radius: 5px;
    transition: var(--transition-smooth);
    display: inline-block;
}

.edit-link a:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
}

@media (max-width: 768px) {
    .page-hero-section {
        min-height: 50vh;
        padding-top: 80px;
    }
    
    .page-article {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }
    
    .page-text-content h2 {
        font-size: 1.5rem;
    }
    
    .page-cta-section {
        padding: 3rem 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SINGLE PORTFOLIO STYLES ===== */
.portfolio-hero {
    min-height: 70vh;
}

.portfolio-category-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-yellow);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-yellow);
    animation: fadeInUp 0.6s ease-out;
}

.portfolio-featured-image {
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

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

.portfolio-meta {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.portfolio-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meta-item-full {
    grid-column: 1 / -1;
}

.meta-label {
    color: var(--color-yellow);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-value {
    color: var(--color-white);
    font-size: 1rem;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-yellow);
    color: var(--color-dark);
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.project-link:hover {
    background: var(--color-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.4);
}

.portfolio-description {
    margin-top: 2rem;
}

.portfolio-navigation {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(212, 175, 55, 0.1);
}

.portfolio-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.portfolio-nav-item {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.4) 0%, rgba(26, 26, 26, 0.6) 100%);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    text-decoration: none;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.portfolio-nav-item:not(.empty):hover {
    border-color: var(--color-yellow);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.portfolio-nav-item.prev {
    text-align: left;
}

.portfolio-nav-item.next {
    text-align: right;
}

.portfolio-nav-item.empty {
    visibility: hidden;
}

.nav-label {
    color: var(--color-yellow);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-nav-item.prev .nav-label {
    justify-content: flex-start;
}

.portfolio-nav-item.next .nav-label {
    justify-content: flex-end;
}

.nav-title {
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .portfolio-hero {
        min-height: 50vh;
    }
    
    .portfolio-meta-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-nav-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-nav-item.empty {
        display: none;
    }
}

/* ===== ARCHIVE STYLES ===== */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.archive-item {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.4) 0%, rgba(26, 26, 26, 0.6) 100%);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: var(--transition-smooth);
    animation: fadeIn 0.6s ease-out;
}

.archive-item:hover {
    border-color: var(--color-yellow);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
}

.archive-thumbnail {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.archive-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.archive-item:hover .archive-thumbnail img {
    transform: scale(1.1);
}

.archive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.archive-item:hover .archive-overlay {
    opacity: 1;
}

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

.archive-content {
    padding: 1.5rem;
}

.archive-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.archive-category {
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-yellow);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.archive-date {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.archive-title {
    margin-bottom: 0.8rem;
}

.archive-title a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.archive-title a:hover {
    color: var(--color-yellow);
}

.archive-excerpt {
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.archive-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.archive-link:hover {
    gap: 0.8rem;
    color: var(--color-yellow-hover);
}

.archive-pagination {
    margin-top: 3rem;
}

.pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

.pagination-list li {
    margin: 0;
}

.pagination-list a,
.pagination-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0.5rem 1rem;
    background: rgba(42, 42, 42, 0.6);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: var(--transition-smooth);
    font-weight: 600;
}

.pagination-list a:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
    border-color: var(--color-yellow);
    transform: translateY(-2px);
}

.pagination-list .current {
    background: var(--color-yellow);
    color: var(--color-dark);
    border-color: var(--color-yellow);
}

.no-results {
    text-align: center;
    padding: 4rem 2rem;
}

.no-results h2 {
    color: var(--color-yellow);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.no-results p {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pagination-list {
        flex-wrap: wrap;
    }
    
    .pagination-list a,
    .pagination-list span {
        min-width: 40px;
        height: 40px;
        padding: 0.4rem 0.8rem;
    }
}

/* ===== SINGLE POST STYLES ===== */
.post-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
}

.post-meta i {
    color: var(--color-yellow);
}

.post-featured-image {
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

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

.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(212, 175, 55, 0.2);
}

.tags-label {
    color: var(--color-yellow);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-item {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-yellow);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: var(--transition-smooth);
}

.tag-item:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
    border-color: var(--color-yellow);
}

.comments-area {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(212, 175, 55, 0.2);
}

.comments-title {
    color: var(--color-yellow);
    font-size: 2rem;
    margin-bottom: 2rem;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.3) 0%, rgba(26, 26, 26, 0.5) 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.comment-author {
    color: var(--color-yellow);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.comment-meta {
    color: var(--color-text-light);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.comment-content {
    color: var(--color-white);
    line-height: 1.6;
}

.comment-content p {
    margin-bottom: 1rem;
}

.reply {
    margin-top: 1rem;
}

.comment-reply-link {
    display: inline-block;
    color: var(--color-yellow);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-yellow);
    border-radius: 5px;
    transition: var(--transition-smooth);
}

.comment-reply-link:hover {
    background: var(--color-yellow);
    color: var(--color-dark);
}

.comment-respond {
    margin-top: 3rem;
}

.comment-reply-title {
    color: var(--color-yellow);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.comment-form {
    display: grid;
    gap: 1rem;
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
    margin: 0;
}

.comment-form label {
    display: block;
    color: var(--color-yellow);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(42, 42, 42, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    color: var(--color-white);
    font-family: var(--font-primary);
    transition: var(--transition-smooth);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.form-submit {
    margin-top: 1rem;
}

.submit {
    background: var(--color-yellow);
    color: var(--color-dark);
    padding: 1rem 2rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.submit:hover {
    background: var(--color-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

@media (max-width: 768px) {
    .post-meta {
        gap: 1rem;
        font-size: 0.85rem;
    }
    
    .comment {
        padding: 1.5rem;
    }
}

/* Mobile Logo Fix */
@media screen and (max-width: 1180px) {
    .nav-container {
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .main-nav {
        overflow: visible !important;
    }

    body {
        overflow-x: hidden !important;
    }

    #quackweb-logo-animation {
        margin-left: -70px !important;
    }
}

/* ===== SCROLL TO TOP BUTTON ===== */
#scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-yellow);
    color: var(--color-dark);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#scrollToTop:hover {
    background: var(--color-yellow-hover);
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 25px rgba(var(--color-yellow-rgb), 0.4);
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#scrollToTop i {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    #scrollToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

/* tylko urządzenia dotykowe */
@media (hover: none) and (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    a:focus,
    a:active,
    .service-card:focus,
    .service-card:active {
        outline: none;
    }
}


/* HERO TITLE — statyczny, zero efektów */

.hero-title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.15;
    color: var(--color-white);
    position: relative;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    view-transition-name: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: manual;
    max-width: 100%;
}

.hero-title:hover,
.hero-title:focus {
    color: var(--color-white) !important;
    transform: none !important;
    text-shadow: none !important;
    animation: none !important;
}

.hero-title::before,
.hero-title::after {
    display: none !important;
}

.hero-title .highlight {
    color: var(--color-yellow);
    position: relative;
    display: inline-block;
    animation: none !important;
    text-shadow: none !important;
    transition: none !important;
}

.hero-title .highlight:hover {
    color: var(--color-yellow);
    text-shadow: none !important;
}

/* FHD i niżej – treść hero z proporcjonalnym odstępem od góry */
@media (min-width: 769px) and (max-height: 1150px) {
    #hero {
        align-items: flex-start;
        padding-top: clamp(200px, 25vh, 300px);
    }
}

/* Fix dla mobile */
@media (max-width: 768px) {
    #hero {
        padding: 120px 3% 60px 3%;
    }

    .hero-content {
        margin: -60px auto 0 auto;
        gap: 1.5rem;
    }

    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1.2rem !important;
    }

    .hero-description {
        font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
    }
}

@media (max-width: 480px) {
    #hero {
        padding: 110px 2% 50px 2%;
    }

    .hero-content {
        margin: -50px auto 0 auto;
    }

    .hero-title {
        font-size: clamp(1.6rem, 8vw, 2rem) !important;
        padding: 0 0.5rem;
        line-height: 1.15 !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
    }
}

/* Force visibility */
.hero-content .hero-title {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== PORTFOLIO LINK CARD ===== */
a.portfolio-card-inner {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.portfolio-link-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    color: var(--color-yellow);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

a.portfolio-card-inner:hover .portfolio-link-hint {
    opacity: 1;
    transform: translateY(0);
}

/* ===== FLUID TEXT & MOBILE FIXES ===== */

/* Section titles - fluid, no-break */
.section-title {
    font-size: clamp(1.6rem, 5vw, 3.5rem) !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Hero title - płynne skalowanie, nie łamie słów agresywnie */
.hero-title {
    font-size: clamp(1.8rem, 6vw, 4.5rem) !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Contact items - email/telefon nie łamie się w środku */
.contact-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

/* Na bardzo małych ekranach pozwól na wrap ale nie w środku słowa */
@media (max-width: 380px) {
    .contact-item span {
        white-space: normal;
        word-break: break-all;
    }
}

/* ===== CTA BUTTONS MOBILE ===== */
@media (max-width: 768px) {
    .hero-buttons {
        align-items: center;
        padding: 0 5%;
    }

    .cta-button {
        min-width: unset;
        width: 100%;
        max-width: 320px;
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .cta-button {
        max-width: 280px;
        padding: 0.85rem 1.2rem;
        font-size: 0.9rem;
    }

    /* Sekcja "Nasze realizacje" tytuł */
    #portfolio .section-title,
    #services .section-title,
    #about .section-title,
    #ai-zone .section-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }
}

/* Nav menu mobile - dot ukryty (obsługa w bloku 1180px powyżej) */

/**
 * QUACKWEB PREMIUM EFFECTS - STYLES
 * Dodatkowe style dla efektów wizualnych
 */

/* ===== MOUSE FOLLOWER ===== */
.mouse-follower {
    position: fixed;
    top: 0;
    left: 0;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0) 70%);
    pointer-events: none;
    z-index: 9996;
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.2, 0, 0.1, 1), background 0.15s ease;
}

.mouse-follower.active {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.5) 0%, rgba(212, 175, 55, 0) 70%);
}

/* ===== RIPPLE EFFECT ===== */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.cta-button,
.submit-btn,
.filter-btn {
    position: relative;
    overflow: hidden;
}

/* ===== SMOOTH CARD TRANSITIONS (NO 3D TILT) ===== */
.service-card,
.portfolio-item,
.ai-project-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

/* ===== GLOW EFFECTS ===== */
.section-title {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                 0 0 40px rgba(212, 175, 55, 0.2);
    animation: title-glow 3s ease-in-out infinite;
}

@keyframes title-glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                     0 0 40px rgba(212, 175, 55, 0.2);
    }
    50% {
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.5),
                     0 0 60px rgba(212, 175, 55, 0.3),
                     0 0 90px rgba(212, 175, 55, 0.15);
    }
}

.hero-title {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.hero-title .highlight {
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.8),
                 0 0 60px rgba(212, 175, 55, 0.4);
    animation: text-glow 2s ease-in-out infinite;
}

@keyframes text-glow {
    0%, 100% {
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.8),
                     0 0 60px rgba(212, 175, 55, 0.4);
    }
    50% {
        text-shadow: 0 0 40px rgba(212, 175, 55, 1),
                     0 0 80px rgba(212, 175, 55, 0.6),
                     0 0 120px rgba(212, 175, 55, 0.3);
    }
}

/* Glow on service icons */
.service-icon {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    transition: filter 0.4s ease;
}

.service-card:hover .service-icon {
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 40px rgba(212, 175, 55, 0.3));
}

/* Glow on stat numbers */
.stat-number {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Button glow effect - REMOVED, styles moved to style.css */

/* ===== TEXT REVEAL ANIMATION ===== */
.text-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.text-reveal.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== ENHANCED HOVER STATES ===== */
.service-card,
.portfolio-item,
.ai-project-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PARTICLES CANVAS ===== */
#particles-canvas {
    filter: blur(1px);
}

/* ===== MAGNETIC BUTTONS - REMOVED, styles in style.css ===== */

/* ===== ANIMATED UNDERLINES ===== */
.nav-menu a {
    position: relative;
    overflow: hidden;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 25%;
    width: 55%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-yellow),
        transparent
    );
    transform: translateX(-100%);
    transition: transform 1.5s ease;
}

.nav-menu a:hover::before {
    transform: translateX(100%);
}

/* ===== GLITCH EFFECT ON HOVER (opcjonalny) ===== */
.hero-title:hover {
    animation: glitch 0.3s ease;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

/* ===== PULSING ELEMENTS ===== */
.stat-number {
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ===== HOVER LIFT EFFECT ===== */
.client-logo {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s ease,
                box-shadow 0.4s ease;
}

.client-logo:hover {
    transform: translateY(-10px) scale(1.1);
    filter: grayscale(0%) brightness(1.2);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
}

/* ===== GRADIENT TEXT ===== */
.section-title {
    background: linear-gradient(135deg,
        #ffffff 0%,
        #d4af37 50%,
        #e8c547 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ===== SUBTLE BORDER GLOW ===== */
.service-card,
.portfolio-item,
.ai-project-card {
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.4s ease;
}

.service-card:hover,
.portfolio-item:hover,
.ai-project-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2),
                0 0 40px rgba(212, 175, 55, 0.1),
                inset 0 0 20px rgba(212, 175, 55, 0.05);
}

/* ===== SPOTLIGHT EFFECT ===== */
.portfolio-item,
.service-card {
    position: relative;
    overflow: hidden;
}

.portfolio-item::after,
.service-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.portfolio-item:hover::after,
.service-card:hover::after {
    opacity: 1;
}

/* ===== ENHANCED SHADOWS - REMOVED, styles in style.css ===== */

/* ===== SMOOTH TRANSITIONS FOR ALL ===== */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== SCROLL INDICATOR - PRZYKLEJONY DO DNA STRONY ===== */
.scroll-indicator-fixed {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 20px;
    z-index: 9998;
    animation: scroll-indicator-pulse 2s ease-in-out infinite;
    pointer-events: all;
    cursor: pointer;
    /* Smooth transitions dla wszystkiego */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.scroll-indicator-fixed:hover {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transform: translateX(-50%) scale(1.1);
}

.scroll-indicator-fixed:active {
    transform: translateX(-50%) scale(0.95);
}

.scroll-indicator-fixed::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-yellow);
    border-radius: 50%;
    animation: scroll-dot 2s ease-in-out infinite;
}

/* Tekst "Przewiń w dół" */
.scroll-text-fixed {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(212, 175, 55, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 9998;
    pointer-events: all;
    cursor: pointer;
    animation: scroll-indicator-pulse 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    /* Smooth transitions */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s ease,
                text-shadow 0.3s ease;
}

.scroll-text-fixed:hover {
    color: rgba(212, 175, 55, 1);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateX(-50%) scale(1.05);
}

.scroll-text-fixed:active {
    transform: translateX(-50%) scale(0.95);
}

/* Ukryj gdy użytkownik przewinie stronę - z smooth animation */
.scroll-indicator-fixed.hidden,
.scroll-indicator-fixed.hidden:hover {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
    animation: fadeOutScroll 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scroll-text-fixed.hidden,
.scroll-text-fixed.hidden:hover {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
    animation: fadeOutScroll 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animacje */
@keyframes scroll-indicator-pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes fadeOutScroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes scroll-dot {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
}

/* ===== LOADING ANIMATION FOR IMAGES ===== */
img {
    animation: fade-in-image 0.6s ease;
}

@keyframes fade-in-image {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.service-card,
.portfolio-item,
.ai-project-card,
.cta-button,
.submit-btn {
    will-change: transform, box-shadow;
}

/* Reset will-change after animation */
.service-card:not(:hover),
.portfolio-item:not(:hover),
.ai-project-card:not(:hover) {
    will-change: auto;
}

/* ===== ANIMATED LOGO ===== */
.logo {
    position: relative;
    transition: all 0.4s ease;
}

.logo::before {
    content: '🦆';
    position: absolute;
    left: -30px;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    transform: scale(1);
}

.logo:hover::before {
    animation: quack 0.5s ease;
}

.logo:hover {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

@keyframes quack {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-10deg);
    }
    50% {
        transform: scale(0.9) rotate(10deg);
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    /* Disable heavy effects on mobile */
    .mouse-follower {
        display: none !important;
    }

    /* Simplify animations */
    .service-card,
    .portfolio-item,
    .ai-project-card {
        transform: none !important;
    }

    /* Reduce glow effects */
    .hero-title .highlight {
        animation: none;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mouse-follower,
    #particles-canvas,
    .custom-cursor,
    .scroll-indicator-fixed,
    .scroll-text-fixed {
        display: none !important;
    }
}


/* === LOGO === */

/* QuackWeb Logo Animation Styles */
.qw-animation-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Usuń podświetlanie na mobile */
#quackweb-logo-animation,
.qw-duck-logo,
.qw-logo-text {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#quackweb-logo-animation:focus {
    outline: none;
}

.qw-typing-text {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-white);
    display: flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    position: absolute;
    z-index: 3;
}

.qw-cursor {
    animation: qw-blink 1s infinite;
    margin-left: 5px;
}

@keyframes qw-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.qw-particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.qw-particle {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    pointer-events: none;
}

.qw-logo-outer-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.8s ease-out;
    z-index: 10;
}

.qw-logo-outer-container.qw-shift-left {
    transform: translate(-50%, -50%) translateX(-60px);
}

.qw-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: scale(0) rotate(-10deg);
    position: relative;
}

.qw-logo-wrapper::before {
    content: '';
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 125px;
    height: 60px;
    background: var(--color-dark);
    z-index: 2;
    pointer-events: none;
}

.qw-logo-wrapper.qw-appear {
    animation: qw-logo-appear 0.6s ease-out forwards;
}

@keyframes qw-logo-appear {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.08) rotate(2deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.qw-duck-logo {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 6px rgba(255, 183, 0, 0.3));
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.qw-duck-logo:hover {
    filter: drop-shadow(0 2px 8px rgba(255, 183, 0, 0.5));
}

.qw-duck-logo.qw-breathing {
    animation: qw-float 4s ease-in-out infinite;
}

@keyframes qw-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.qw-logo-text-wrapper {
    position: absolute;
    left: 0;
    overflow: visible;
    z-index: 1;
}

.qw-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.8s ease-out;
    position: relative;
    left: 0;
    z-index: 1;
}

.qw-logo-text.qw-show {
    opacity: 1;
    transform: translateX(70px);
}

.qw-quack {
    color: #FFB700;
}

.qw-web {
    color: var(--color-white);
}

.qw-hidden {
    display: none !important;
}


/* ===== YOOTHEME COMPATIBILITY (minimal) ===== */

/* 1. YOOtheme wrappers - no background, no padding */
.uk-section,
.uk-section-default {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Full width containers */
.uk-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Body base background */
html {
    background-color: var(--color-dark) !important;
}
body, .tm-page {
    background-color: transparent !important;
    color: var(--color-white) !important;
}

/* 4. tsParticles - fixed behind everything */
#tsparticles, #quackweb-particles {
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 5. All sections need position relative to sit above particles */
section, footer {
    position: relative;
    z-index: 2;
}
.main-nav { z-index: 9997 !important; }

/* 6. Remove nav underlines added by premium-effects */
.nav-menu a::before { display: none !important; }

/* 7. Disable buggy per-element animations */
.service-card, .portfolio-card, .portfolio-item,
.ai-project-card, .stat-item {
    opacity: 1 !important;
    transform: none !important;
}
.service-card:hover { transform: translateY(-12px) !important; }
.portfolio-card-inner:hover { transform: translateY(-10px) !important; }
.ai-project-card:hover { transform: translateY(-5px) !important; }
.stat-item:hover { transform: translateY(-10px) !important; }
.portfolio-card { animation: none !important; }

/* 8. Hide YOOtheme toolbar if present */
.tm-toolbar { display: none !important; }



/* ===== PARTICLES THROUGH SECTIONS - THEME-AWARE ===== */
#about {
    background-color: rgba(var(--color-navy-rgb, 26, 26, 26), 0.93) !important;
}
#services {
    background-color: rgba(var(--color-dark-rgb, 15, 15, 15), 0.93) !important;
}
#portfolio {
    background-color: rgba(var(--color-navy-rgb, 26, 26, 26), 0.93) !important;
}
#ai-zone {
    background-color: rgba(var(--color-dark-rgb, 15, 15, 15), 0.93) !important;
}
#clients {
    background-color: rgba(var(--color-navy-rgb, 26, 26, 26), 0.93) !important;
}
#contact {
    background-color: rgba(var(--color-dark-rgb, 15, 15, 15), 0.93) !important;
}
footer {
    background-color: rgba(var(--color-navy-rgb, 26, 26, 26), 0.95) !important;
}


/* ===== LIGHT THEME - MORE TRANSPARENCY ===== */
[style*="--color-dark: #f4ebe1"] #about,
[style*="--color-dark: #f4ebe1"] #services,
[style*="--color-dark: #f4ebe1"] #portfolio,
[style*="--color-dark: #f4ebe1"] #ai-zone,
[style*="--color-dark: #f4ebe1"] #clients,
[style*="--color-dark: #f4ebe1"] #contact {
    background-color: rgba(var(--color-navy-rgb), 0.85) !important;
}

/* ===== FIX: HOVER - NO UNDERLINES, NO BLUE ===== */
/* Kill ALL link underlines and blue color globally */
a, a:hover, a:focus, a:active, a:visited {
    text-decoration: none !important;
    outline: none !important;
}

/* UK (UIkit) link overrides */
.uk-link, .uk-link:hover,
a.uk-link-text, a.uk-link-text:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Nav links - gold on hover, nothing else */
.nav-menu a,
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a:visited {
    color: var(--color-white) !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.nav-menu a:hover {
    color: var(--color-yellow) !important;
}

/* Footer links */
.footer-links a,
.footer-links a:hover {
    text-decoration: none !important;
}
.footer-links a:hover {
    color: var(--color-yellow) !important;
}

/* Portfolio card links */
a.portfolio-card-inner,
a.portfolio-card-inner:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Contact links */
.contact-item a,
.contact-item a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Social links */
.social-link,
.social-link:hover {
    text-decoration: none !important;
}

/* Client logos */
.client-logo,
.client-logo:hover {
    text-decoration: none !important;
}

/* CTA buttons */
.cta-button,
.cta-button:hover {
    text-decoration: none !important;
    color: var(--color-dark) !important;
}

/* UIkit default link styles - nuclear option */
.tm-page a:not(.cta-button):not(.social-link):not(.client-logo):not(.submit-btn) {
    text-decoration: none !important;
}

/* ===================================================================
   PODSTRONA CASE STUDY PORTFOLIO (np. Regutech) - dodano 2026-06-28
   =================================================================== */

.case-back-link {
    display: inline-block;
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: var(--transition-smooth);
}

.case-back-link:hover {
    color: var(--color-yellow);
}

.case-hero .hero-content {
    text-align: left;
    align-items: flex-start;
    max-width: 720px;
    margin: 0;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.case-tag {
    padding: 0.4rem 1.1rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.08);
    color: var(--color-yellow);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.case-meta-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-yellow);
    flex-shrink: 0;
}

.case-meta-client {
    color: var(--color-white);
    font-weight: 700;
}

.case-meta-link {
    color: var(--color-text-light);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.case-meta-link:hover {
    color: var(--color-yellow);
}

.case-laptop {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.case-laptop-screen {
    border: 14px solid #1a1a1a;
    border-bottom-width: 18px;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.case-laptop-screen img {
    width: 100%;
    height: auto;
    display: block;
}

.case-laptop-base {
    height: 16px;
    margin: 0 -2%;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.case-narrative-grid .page-article + .page-article {
    margin-top: 2rem;
}

.case-subsection-title {
    color: var(--color-yellow);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

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

.case-color-swatch {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-color-preview {
    height: 90px;
}

.case-color-info {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
}

.case-color-hex {
    display: block;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--color-white);
}

.case-color-rgb {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 0.2rem;
}

.case-type-sample {
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    padding-top: 2rem;
}

.case-type-name {
    color: var(--color-yellow);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.case-type-weight {
    color: var(--color-text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1rem 0 0.5rem;
}

.case-type-alphabet {
    font-family: 'Geoform', var(--font-primary);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: var(--color-white);
    word-break: break-word;
}

/* ===== CASE SHOWCASE — two independent columns, no row-height coupling ===== */
/*
 * Root cause: row-based grid ties text height to image height.
 * When text > image, gap appears below the image.
 * Fix: put all texts in ONE flex column, all images in ANOTHER — completely decoupled.
 * JS in quackweb-global.js sets min-height on each text item to match its image height.
 */
/* Wrapper spans full viewport width with solid background (blocks particles) */
.case-showcase-wrapper {
    background-color: var(--color-navy);
    position: relative;
    z-index: 1;
}

/* Inner flex layout is max-width constrained + padded */
.case-showcase {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Separator sections that stay visible (stats bar etc.):
   background stays full-width on the section,
   inner content is max-width constrained like the showcase */
section.case-screens-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.case-screens-section > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
}

/* Separator-section rows: same 42/58 proportions as the showcase.
   45px side padding on .case-screens-image stays (from page's local CSS) —
   shadows sit in that gap, outside the image. */
section.case-screens-section .case-screens-row {
    grid-template-columns: 42% 58% !important;
}

/* Hero split: match showcase proportions (42/58) and same 3rem outer padding
   so the image column starts at the exact same x-position as showcase images. */
#case-hero .case-hero-split {
    grid-template-columns: 42% 58% !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* Remove hero-left's own left padding — outer padding now comes from split. */
#case-hero .case-hero-left {
    padding-left: 0 !important;
}

/* ── Showcase image wrapper: 45px side gap with gradient shadows outside the image ── */
.case-showcase-img-wrap {
    position: relative;
    padding: 0 45px;
    overflow: hidden;
    /* If JS ever grows this wrap's min-height to match an overly tall text
       block, keep the image pinned to the bottom so it still touches the
       next image with no gap — any leftover space lands above it instead. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.case-showcase-img-wrap::before,
.case-showcase-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45px;
    z-index: 1;
    pointer-events: none;
}

.case-showcase-img-wrap::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(var(--case-shadow-rgb, 0,0,0), 0),
        rgba(var(--case-shadow-rgb, 0,0,0), 0.85));
}

.case-showcase-img-wrap::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(var(--case-shadow-rgb, 0,0,0), 0),
        rgba(var(--case-shadow-rgb, 0,0,0), 0.85));
}

.case-showcase-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.case-showcase-texts {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
}

.case-showcase-text {
    /* fluid vertical padding: shrinks together with the image (42%/58% columns
       scale with the viewport) so text never outgrows the shrinking image height */
    --showcase-text-vpad: clamp(1.5rem, -3.95rem + 9.09vw, 4rem);
    padding: var(--showcase-text-vpad) 3rem var(--showcase-text-vpad) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box; /* min-height set by JS must include padding, not add to it */
}

.case-showcase-text:last-child {
    border-bottom: none;
}

.case-showcase-text h3 {
    color: var(--color-yellow);
    font-size: clamp(1.15rem, 0.39rem + 1.27vw, 1.5rem);
    font-weight: 700;
    margin-bottom: clamp(0.6rem, -0.27rem + 1.46vw, 1rem);
}

.case-showcase-text p {
    color: var(--color-text-light);
    font-size: clamp(0.85rem, 0.52rem + 0.55vw, 1rem);
    line-height: 1.7;
}

.case-showcase-images {
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
}

/* images now sit inside .case-showcase-img-wrap — no direct img rule needed here */

@media (max-width: 960px) {
    .case-showcase {
        flex-direction: column;
        padding: 0 1.5rem;
    }

    section.case-screens-section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    section.case-screens-section .case-screens-row {
        grid-template-columns: 1fr !important;
    }

    .case-showcase-img-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #case-hero .case-hero-split {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #case-hero .case-hero-left {
        padding-left: 1.5rem !important;
    }

    .case-showcase-texts,
    .case-showcase-images {
        flex: none;
        width: 100%;
    }

    .case-showcase-text {
        padding: 2.5rem 0;
    }

    .case-showcase-text h3 {
        font-size: 1.35rem;
        margin-bottom: 0.8rem;
    }

    .case-showcase-text p {
        font-size: 1rem;
    }
}
/* ============================================================ */

@media (max-width: 768px) {
    .case-hero .hero-content {
        max-width: 100%;
    }

    .case-laptop-screen {
        border-width: 8px;
        border-bottom-width: 12px;
    }
}

/* ===== PORTFOLIO CARDS V2 ===== */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem 0;
}

.pf-card {
    position: relative;
    /* Explicit — aspect-ratio + min-height on a grid item, with width left
       implicit, made the browser derive width FROM the min-height-clamped
       height instead of from the grid column, so cards rendered wider than
       their own column and overlapped their neighbor. Pinning width:100%
       keeps the column authoritative; only height is free to grow. */
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    /* Floor on top of aspect-ratio — at narrow 2-column widths, 16:10 alone made
       the panel too short for readable text; min-height makes the card grow
       taller than that ratio instead of the text shrinking to fit. The
       background image (object-fit: cover) just covers the extra height fine. */
    min-height: 380px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.55);
    animation: pfBreathing 6s ease-in-out infinite;
    cursor: pointer;
}
.pf-card:nth-child(2) { animation-delay: -3s; }
.pf-card:nth-child(3) { animation-delay: -1.5s; }
.pf-card:nth-child(4) { animation-delay: -4.5s; }
.pf-card:hover { animation-play-state: paused; }

@keyframes pfBreathing {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.pf-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.pf-card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(var(--color-navy-rgb, 26, 26, 26), 1);
}

.pf-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(0.1) brightness(0.45);
    transform: scale(1);
    transition: filter 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.pf-card:hover .pf-card-image img {
    filter: saturate(1) brightness(0.9);
}

.pf-card-image--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(212, 175, 55, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* ===== LIGHT MODE – pf-card ===== */
[style*="--color-dark: #f4ebe1"] .pf-card {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1);
}
[style*="--color-dark: #f4ebe1"] .pf-card-hint {
    color: #ffffff;
}
[style*="--color-dark: #f4ebe1"] .pf-card-hint .pf-hint-arrow {
    color: #0d0f12;
}
[style*="--color-dark: #f4ebe1"] .pf-card-image img {
    filter: saturate(0.1) brightness(2.2);
}
[style*="--color-dark: #f4ebe1"] .pf-card:hover .pf-card-image img {
    filter: saturate(1) brightness(0.9);
}
[style*="--color-dark: #f4ebe1"] .pf-card-image--placeholder {
    background: linear-gradient(135deg, #cec8c0 0%, #dbd5cc 55%, #e5dfd8 100%);
}
[style*="--color-dark: #f4ebe1"] .pf-card-image--placeholder::after {
    background:
        linear-gradient(rgba(80, 60, 40, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 60, 40, 0.06) 1px, transparent 1px);
}
[style*="--color-dark: #f4ebe1"] .pf-card--soon .pf-card-panel {
    background: rgba(var(--color-navy-rgb, 26, 26, 26), 0.5);
    border-left: 1px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(6px);
}
[style*="--color-dark: #f4ebe1"] .pf-soon-title {
    color: rgba(255, 255, 255, 0.5);
}

.pf-card-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 47%;
    background: var(--color-yellow);
    /* Fluid, not fixed — at ~1000-1100px (still 2 columns, so each card is
       noticeably narrower/shorter) fixed 2.2rem padding ate too much of an
       already-shrunk panel, which is what caused the overflow below. */
    padding: clamp(0.9rem, 0.4rem + 2vw, 1.8rem) clamp(0.8rem, 0.3rem + 1.8vw, 1.6rem) clamp(0.8rem, 0.3rem + 1.8vw, 1.6rem) clamp(0.9rem, 0.4rem + 2vw, 1.8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.3rem, 0.7vw, 0.7rem);
    transform: translateX(0);
    transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.pf-card:hover .pf-card-panel {
    transform: translateX(102%);
}

.pf-card-title {
    font-size: clamp(1.2rem, 0.85rem + 1.5vw, 2rem);
    font-weight: 900;
    color: #0d0f12;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.pf-card-desc {
    color: rgba(13, 15, 18, 0.8);
    /* Back to a genuinely readable size — the card's min-height (above) makes
       room for it now instead of the text shrinking to fit a fixed-ratio box. */
    font-size: clamp(0.82rem, 0.72rem + 0.3vw, 0.95rem);
    line-height: 1.45;
    margin: 0;
}

.pf-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.05rem;
}

.pf-tag {
    padding: clamp(0.2rem, 0.5vw, 0.35rem) clamp(0.55rem, 1.2vw, 0.9rem);
    border-radius: 50px;
    font-size: clamp(0.6rem, 0.55rem + 0.15vw, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
}
/* hardcoded hex — nie zmienia się z jasnym motywem */
.pf-tag--dark  { background: #0d0f12; color: #ffffff; }
.pf-tag--white { background: #ffffff; color: #0d0f12; }

.pf-tag-dot {
    width: clamp(9px, 1.3vw, 18px);
    height: clamp(9px, 1.3vw, 18px);
    border-radius: 50%;
    flex-shrink: 0;
}
.pf-tag-dot--dark  { background: #0d0f12; }
.pf-tag-dot--white { background: #ffffff; }

.pf-card-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s 0.22s ease, transform 0.3s 0.22s ease;
    pointer-events: none;
}

.pf-card:hover .pf-card-hint {
    opacity: 1;
    transform: translateY(0);
}

.pf-hint-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-yellow);
    color: #0d0f12;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

/* ===== KARTA "DOSTĘPNE WKRÓTCE" ===== */
.pf-card--soon {
    animation: none;
    cursor: default;
}
.pf-card--soon .pf-card-panel {
    background: rgba(var(--color-navy-rgb, 26, 26, 26), 0.92);
    border-left: 1px solid rgba(212, 175, 55, 0.18);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.pf-card--soon:hover .pf-card-panel {
    transform: none;
}
.pf-card--soon .pf-card-image img {
    filter: saturate(0) brightness(0.3);
}
.pf-card--soon:hover .pf-card-image img {
    filter: saturate(0) brightness(0.3);
    transform: none;
}
.pf-soon-badge {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: var(--color-yellow);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}
.pf-soon-title {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.2;
    margin: 0;
}

/* Portfolio card links – no underline */
a.pf-card-link,
a.pf-card-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

@media (max-width: 1100px) {
    .pf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1050px) {
    /* Was 700px — between ~700-1000px, two narrow columns left too little
       vertical room in the panel for title+description+tags to fit even
       with the fluid sizing and 3-line description clamp above; a full-width
       single card in that range has plenty of room instead. */
    .pf-grid {
        grid-template-columns: 1fr;
    }
    /* Na mobile panel zawsze widoczny po prawej – jak desktop default */
    .pf-card-panel {
        width: 54%;
        top: 0; bottom: 0; height: auto;
        padding: 1.1rem 1.1rem 1.1rem 1.3rem;
        transform: translateX(0) !important;
        transition: none;
        gap: 0.6rem;
    }
    .pf-card:hover .pf-card-panel { transform: translateX(0) !important; }
    .pf-card-title { font-size: clamp(0.9rem, 5vw, 1.2rem); }
    .pf-card-desc { display: none; }
    .pf-card-hint { display: none; }
    .pf-card { animation: none; }
}

/* ============================================================
   CASE STUDY — pojedyncza podstrona portfolio (qw-portfolio)
   Fresh namespace (.qw-case-*) — nie koliduje z wcześniejszymi
   iteracjami (.case-showcase-*, .case-screens-*, .case-tag itd.),
   które zostają w pliku nieużywane. Zero !important na zmiennych
   kolorów — motyw (navy/dark/light) dziedziczy się normalnie.
   Wiersze renderowane wprost w PHP (bez JS), więc brak layout
   thrashingu i migania treści.
   ============================================================ */
:root {
    --case-shadow-rgb: 0, 0, 0;
    /* Fluid gutter width — scales with viewport instead of a flat 45px, but is one
       single value (not a %) so it means the same length whether it's used for
       padding-top, padding-left, or a background-size, sidestepping the CSS quirk
       where % padding-top/bottom is resolved against the box's WIDTH, not its
       height (which made the padding and the gradient drift out of sync). Used for
       BOTH the padding gutter (below) and the gradient band size, so they always
       match exactly — the fade lives in the gap around the image, not on top of it. */
    --qw-case-gutter: clamp(20px, 4vw, 60px);
    /* Left/right gutters only — used on every image (hero, stats, content rows, footer).
       Top and bottom are added separately, only on the page's actual first/last image
       (see --qw-case-vignette-top / --qw-case-vignette-bottom below), not on every row —
       a top+bottom fade on every single image reads as a repeating stripe down the page. */
    --qw-case-vignette-sides:
        linear-gradient(to right, transparent, rgba(var(--case-shadow-rgb), 0.85)) left  / var(--qw-case-gutter) 100% no-repeat,
        linear-gradient(to left,  transparent, rgba(var(--case-shadow-rgb), 0.85)) right / var(--qw-case-gutter) 100% no-repeat;
    /* The box is taller than the image itself here (padding adds a top-only or
       bottom-only gutter on top of the image's own height) — so the side bands are
       sized to just the image's own height (100% minus that one gutter) and anchored
       to whichever edge the image actually touches, instead of running the box's
       full height and bleeding into the gutter strip where there's no image at all.
       The top/bottom band is likewise confined to the image's own WIDTH (not the
       box's), offset by one gutter — previously both spanned the full box and stuck
       out past the image on all sides. That leaves the two outer corner squares
       (gutter × gutter) untouched by either band, so a quarter-circle radial fills
       each one — centered on the inner corner point where both bands are already
       fully dark, radius = gutter so it fades to transparent exactly at the two
       edges it borders. Six non-overlapping regions total, nothing compounds. */
    --qw-case-vignette-top:
        linear-gradient(to right,  transparent, rgba(var(--case-shadow-rgb), 0.85)) left bottom  / var(--qw-case-gutter) calc(100% - var(--qw-case-gutter)) no-repeat,
        linear-gradient(to left,   transparent, rgba(var(--case-shadow-rgb), 0.85)) right bottom / var(--qw-case-gutter) calc(100% - var(--qw-case-gutter)) no-repeat,
        linear-gradient(to bottom, transparent, rgba(var(--case-shadow-rgb), 0.85)) var(--qw-case-gutter) top / calc(100% - 2 * var(--qw-case-gutter)) var(--qw-case-gutter) no-repeat,
        radial-gradient(circle var(--qw-case-gutter) at 100% 100%, rgba(var(--case-shadow-rgb), 0.85), transparent) left top  / var(--qw-case-gutter) var(--qw-case-gutter) no-repeat,
        radial-gradient(circle var(--qw-case-gutter) at 0% 100%,   rgba(var(--case-shadow-rgb), 0.85), transparent) right top / var(--qw-case-gutter) var(--qw-case-gutter) no-repeat;
    --qw-case-vignette-bottom:
        linear-gradient(to right,  transparent, rgba(var(--case-shadow-rgb), 0.85)) left top   / var(--qw-case-gutter) calc(100% - var(--qw-case-gutter)) no-repeat,
        linear-gradient(to left,   transparent, rgba(var(--case-shadow-rgb), 0.85)) right top  / var(--qw-case-gutter) calc(100% - var(--qw-case-gutter)) no-repeat,
        linear-gradient(to top,    transparent, rgba(var(--case-shadow-rgb), 0.85)) var(--qw-case-gutter) bottom / calc(100% - 2 * var(--qw-case-gutter)) var(--qw-case-gutter) no-repeat,
        radial-gradient(circle var(--qw-case-gutter) at 100% 0%, rgba(var(--case-shadow-rgb), 0.85), transparent) left bottom  / var(--qw-case-gutter) var(--qw-case-gutter) no-repeat,
        radial-gradient(circle var(--qw-case-gutter) at 0% 0%,   rgba(var(--case-shadow-rgb), 0.85), transparent) right bottom / var(--qw-case-gutter) var(--qw-case-gutter) no-repeat;
}

/* Sitewide `img { animation: fade-in-image ... }` (line ~3545) leaves lazy-loaded
   images sitting at opacity:0 until they scroll into view and the animation plays —
   reads as "transparent" images while scrolling. Case study screenshots should just
   be there, fully opaque, the instant they load. */
#qw-case-page img {
    animation: none;
    opacity: 1;
}

/* ── HERO ──
   `section { min-height: 100vh }` is a sitewide base rule (line ~383) — override it
   here or the hero balloons to fill the viewport regardless of content. */
.qw-case-hero {
    position: relative;
    overflow: hidden;
    padding: 140px 0 0;
    min-height: auto;
}
.qw-case-hero .hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    /* Bare `.hero-background { background: linear-gradient(...) }` (line ~436) would
       otherwise paint a diagonal gradient sheen here — this section has no particle
       canvas to house, so it stays empty/transparent. */
    background: none;
}
.qw-case-hero .hero-content {
    position: relative;
    z-index: 1;
    /* Bare `.hero-content` (line ~473) is a `display:flex; align-items:center;
       padding:0 1rem` container built for the homepage's narrow centered hero —
       every one of those needs an explicit override here, or the grid below
       resolves its 42/58 split against the wrong (narrower, ambiguous) box and
       the hero image renders narrower than the row images. */
    display: block;
    align-items: unset;
    justify-content: unset;
    gap: 0;
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
.qw-case-hero .hero-title {
    text-align: left;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--color-white);
    margin-bottom: 0;
    /* !important needed: a bare `.hero-title { font-size: ... !important }` (line ~3061)
       otherwise wins regardless of selector specificity. */
    font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem) !important;
    font-weight: 800;
    line-height: 1.15;
}
.qw-case-hero .hero-description {
    text-align: left;
    max-width: none;
    margin: 0.9rem 0 0;
    color: var(--color-text-light);
    font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.1rem);
    line-height: 1.7;
}

.qw-case-hero-split {
    display: grid;
    grid-template-columns: 42% 58%;
    /* Bottom-aligned, not centered — the image must sit flush against the row
       below it (stats separator / first content row). Centering left a gap under
       the image whenever the text column (title+desc+tags+meta) is taller than it. */
    align-items: end;
    margin-top: 1.1rem;
}
.qw-case-hero-left {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* 3rem left matches .qw-case-text's own left inset, so the hero title and the
       row headings below start at the same x-position. */
    padding: 0 2rem 3rem 3rem;
    min-width: 0;
}
.qw-case-hero-right {
    position: relative;
    /* Top gutter, no bottom — this is the page's first image, only it gets a top fade. */
    padding: var(--qw-case-gutter) var(--qw-case-gutter) 0;
    min-width: 0;
}
.qw-case-hero-right::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--qw-case-vignette-top); }
.qw-case-hero-right img { display: block; width: 100%; height: auto; }

/* Tags */
.qw-case-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.qw-case-tag {
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.qw-case-tag--yellow { background: var(--color-yellow); color: #0d0f12; }
.qw-case-tag--white  { background: var(--color-white);  color: #0d0f12; }
.qw-case-tag-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.qw-case-tag-dot--yellow { background: var(--color-yellow); }
.qw-case-tag-dot--white  { background: var(--color-white); }

/* Client meta */
.qw-case-meta-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.qw-case-meta-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-yellow); flex-shrink: 0; }
.qw-case-meta-client { color: var(--color-white); font-weight: 700; }
.qw-case-meta-link { color: var(--color-text-light); text-decoration: none; transition: var(--transition-smooth); }
.qw-case-meta-link:hover { color: var(--color-yellow); }

/* ── ROWS (stats separator / content screenshots / footer) ──
   Each .qw-case-row is full-bleed (background spans viewport width);
   .qw-case-row-inner is the boxed 42/58 grid. Grid's default
   align-items:stretch makes text and image cells match height —
   no JS needed, no uneven tiles. */
.qw-case-row { width: 100%; }
/* Same alternating navy/dark bands (0.93 alpha) as the homepage's #about/#services/... */
.qw-case-bg-navy { background-color: rgba(var(--color-navy-rgb, 26, 26, 26), 0.93); }
.qw-case-bg-dark { background-color: rgba(var(--color-dark-rgb, 15, 15, 15), 0.93); }

.qw-case-row-inner {
    display: grid;
    grid-template-columns: 42% 58%;
    max-width: 1400px;
    margin: 0 auto;
}

.qw-case-text {
    padding: clamp(1.5rem, -1.2rem + 4.8vw, 3rem) clamp(1rem, 2vw, 2rem) clamp(1.5rem, -1.2rem + 4.8vw, 3rem) 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.qw-case-text-empty { min-width: 0; }

.qw-case-text h3 {
    color: var(--color-yellow);
    font-size: clamp(1.15rem, 0.34rem + 1.44vw, 1.6rem);
    font-weight: 700;
    margin-bottom: clamp(0.6rem, -0.12rem + 1.28vw, 1rem);
}
.qw-case-text p {
    color: var(--color-text-light);
    font-size: clamp(0.85rem, 0.58rem + 0.48vw, 1rem);
    line-height: 1.7;
}

.qw-case-img {
    position: relative;
    min-width: 0;
    padding: 0 var(--qw-case-gutter);
    display: flex;
    align-items: center;
    align-self: stretch;
}
.qw-case-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.qw-case-img::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--qw-case-vignette-sides); }

/* Only the page's last row gets a bottom fade — matches the hero (page's first
   image) getting the only top fade. Every row in between is sides-only, or the
   fade reads as a stripe repeating down the whole page. Needs its own bottom
   gutter (base .qw-case-img only has left/right padding) for that fade to
   actually have room to live in, same as hero's own top-only padding. */
.qw-case-row:last-of-type .qw-case-img {
    padding-bottom: var(--qw-case-gutter);
}
.qw-case-row:last-of-type .qw-case-img::before {
    background: var(--qw-case-vignette-bottom);
}

/* Stats separator / footer: image only, no text column, natural height */
.qw-case-row-separator .qw-case-img,
.qw-case-row-footer .qw-case-img {
    align-self: auto;
}
.qw-case-row-separator .qw-case-img img,
.qw-case-row-footer .qw-case-img img {
    height: auto;
    object-fit: unset;
}

@media (max-width: 900px) {
    .qw-case-hero .hero-content { text-align: center; }
    .qw-case-hero-split { grid-template-columns: 1fr; text-align: center; }
    .qw-case-hero-left { align-items: center; padding: 0 1.5rem 2rem; }
    .qw-case-hero-right { padding: 1.5rem; }
    .qw-case-hero-right::before { display: none; }
    .qw-case-tags { justify-content: center; }
    .qw-case-meta-row { justify-content: center; }

    .qw-case-row-inner { grid-template-columns: 1fr; }
    .qw-case-text { padding: 1.5rem 1rem; }
    .qw-case-text h3 { font-size: 1.35rem; }
    .qw-case-text p { font-size: 1rem; }
    .qw-case-text-empty { display: none; }
    .qw-case-img { order: -1; padding: 1rem; align-self: auto; }
    .qw-case-row:last-of-type .qw-case-img { padding-bottom: 1rem; }
    .qw-case-img img { height: auto; object-fit: unset; }
    .qw-case-img::before { display: none; }
}