:root {
    --bg: #0a0a0a;
    --text: #ffffff;
    --text-muted: #888888;
    --accent: #D4AF37; /* Gold */
    --accent-glow: rgba(212, 175, 55, 0.4);
    --secondary: #00FFCC; /* Cyan */
    --font-head: 'Syncopate', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --pad-container: 8vw;
    --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: hidden;
    cursor: auto; /* Default cursor for mobile/touch */
}

@media (min-width: 1024px) {
    body {
        cursor: none; /* Custom cursor only on desktop */
    }
}


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

/* NOISE OVERLAY */
.noise-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* CURSOR */
.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--text);
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}
.cursor-circle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--text);
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, border 0.3s ease;
    mix-blend-mode: difference;
}

.hovered .cursor-circle {
    transform: translate(-50%, -50%) scale(1.5);
    background: rgba(255,255,255,0.1);
    border-color: transparent;
}

/* PRELOADER */
.preloader {
    position: fixed;
    top:0; left:0; width:100%; height:100vh;
    background: #000;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s var(--ease);
}
.loader-content {
    text-align: center;
}
.loader-text {
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    color: var(--accent);
}
.loader-bar {
    width: 200px;
    height: 2px;
    background: #333;
    position: relative;
    overflow: hidden;
}
.loader-progress {
    position: absolute;
    left:0; top:0; height:100%; width: 0%;
    background: var(--accent);
    transition: width 0.5s linear;
}

/* NAV */
.nav {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 100;
    padding: 2rem 5vw;
    mix-blend-mode: difference;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.brand .dot { color: var(--accent); }


.nav-links {
    display: flex;
    gap: 3rem;
}
.nav-link {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.nav-link::after {
    content:attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    color: var(--accent);
    transition: transform 0.3s var(--ease);
}
.nav-link:hover {
    color: transparent;
}
.nav-link:hover::after {
    transform: translateY(-100%);
}

.mobile-only { display: none; }

/* HERO */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 70%);
}

.hero-bg-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    filter: blur(80px);
    pointer-events: none;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-label {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: var(--accent);
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 1s var(--ease) 0.5s forwards;
}

.hero-title {
    font-family: var(--font-head);
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.9;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 3rem;
}

.title-line {
    display: block;
    transform: translateY(100%); 
    /* Animated in JS */
}

.title-line.outline {
    -webkit-text-stroke: 1px var(--text);
    color: transparent;
    opacity: 0.5;
}
.title-line.small {
    font-size: 0.4em;
    letter-spacing: 0.5em;
    margin-top: 1rem;
    color: var(--text-muted);
}

.overflow-hidden {
    overflow: hidden;
}

.hero-footer {
    position: absolute;
    bottom: 3rem;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    opacity: 0;
    animation: fadeIn 1s var(--ease) 1.5s forwards;
}

.hero-bio {
    max-width: 400px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--accent);
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--accent);
    transform: translateY(-100%);
    animation: scrollLines 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollLines {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0%); }
    100% { transform: translateY(100%); }
}

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

/* WORK SECTION */
.work {
    padding: 10rem var(--pad-container);
    position: relative;
    z-index: 10;
}

.section-header {
    margin-bottom: 5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 2rem;
    display: flex;
    align-items: baseline;
    gap: 2rem;
}
.section-idx {
    font-family: var(--font-head);
    color: var(--accent);
    font-size: 1.2rem;
}
.section-title {
    font-family: var(--font-head);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- ULTIMATE FIX - SIMPLIFIED LAYOUT --- */

/* 1. RESET SIZING BASICS */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    max-width: 100vw;
}

/* 2. LAYOUT GRID - CLEAR AND SIMPLE */
.project-item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 6rem;
    width: 100%;
    max-width: 1200px; /* Limit container width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 5vw; /* Safe side padding */
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .project-item {
        display: flex;
        flex-direction: row; /* Horizontal on desktop */
        align-items: center;
        gap: 4rem; /* Spacing between text and gallery */
        justify-content: space-between;
    }
    
    .project-item.reversed {
        flex-direction: row-reverse;
    }
    
    .project-item .project-info {
        flex: 1 1 40%; /* Text takes 40% */
        min-width: 300px; /* Force minimum width */
    }
    
    .project-item .project-visual {
        flex: 1 1 55%; /* Gallery takes 55% */
        min-width: 0; /* Important for flex child with scrolling content! */
    }
}

/* APP ICON STYLING */
.project-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px; /* Rounded square */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Deep shadow */
    border: 1px solid rgba(255,255,255,0.1); /* Subtle border */
    margin-bottom: 1rem;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(79, 172, 254, 0.3); /* Glow on hover */
}

/* 3. GALLERY SLIDER - FIXING THE "STACKING" ISSUE */
/* The issue "zdjecia jedno pod drugim" means the flex-direction of slider-track is wrong or wrapping */

.gallery-slider {
    width: 100%; /* Fill the container space (55% or 100%) */
    overflow: hidden; /* Hide scrollbar visual but allow scroll */
    position: relative;
    border-radius: 12px;
}

.slider-track {
    display: flex; /* CRITICAL: Force horizontal layout */
    flex-direction: row; /* CRITICAL */
    flex-wrap: nowrap; /* CRITICAL: Prevent wrapping to next line */
    align-items: center;
    gap: 20px;
    
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    
    padding: 20px 0; /* Top/bottom padding for shadows */
    width: 100%; /* Fill parent */
    
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 auto; /* Don't shrink, sized by width */
    width: 200px;
    height: 355px; /* 9:16 approx */
    scroll-snap-align: start;
    
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    position: relative;
    
    /* Reset all transforms that might cause issues */
    transform: none !important; 
    opacity: 1 !important;
    margin: 0; /* Remove potential margins causing overflow */
}

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

/* 4. MAC/DESKTOP WIDTH FIXES */
/* If site "nie miesci sie na ekranie", likely hero font or container padding is too big */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

.hero-title {
    /* Use clamp extensively to prevent blowout on smaller laptops */
    font-size: clamp(2.5rem, 8vw, 6rem); 
    line-height: 1.1;
    word-break: break-word; /* Prevent long words breaking layout */
}

/* Reduce excessive margins that push content off screen */
.work {
    padding: 5rem 0; /* Remove horizontal padding from section, container handles it */
}

/* Ensure images don't hold layout open */
img {
    max-width: 100%;
    height: auto;
}




.slider-dots { display: none; }
/* scroll-hint gradient fades on edges */
.gallery-slider::before,
.gallery-slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 60px; /* Wider fade */
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.gallery-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.gallery-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}


/* SLIDER CONTROLS (ARROWS) - REMOVED */
.slider-btn {
    display: none !important;
}

/* 
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(20,20,20,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}
.slider-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-50%) scale(1.1);
}
.slider-prev {
    left: 10px;
}
.slider-next {
    right: 10px;
}
*/


/* Only show buttons on hover on desktop to keep it clean? 
   Or always show? User asked for them specifically to be 'on sides'.
   Let's keep them always visible on desktop, maybe hide on mobile to save space.
*/
@media (max-width: 768px) {
    .slider-btn { display: none; }
}

.visual-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #151515;
    color: #444;
    font-family: var(--font-head);
    letter-spacing: 0.2em;
}


/* LIGHTBOX */
.lightbox-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    backdrop-filter: blur(16px);
}
.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}
.lightbox-frame {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0,0,0,0.8); /* Glow */
    border: 1px solid rgba(255,255,255,0.1);
    transform: scale(0.95);
    transition: transform 0.4s var(--ease);
}
.lightbox-modal.active .lightbox-frame {
    transform: scale(1);
}
.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
}
.lightbox-close {
    position: absolute;
    top: -50px; 
    right: 0;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    opacity: 0.7;
    transition: all 0.3s var(--ease);
}
.lightbox-close:hover { 
    opacity: 1; 
    color: var(--accent); 
    transform: scale(1.1) rotate(90deg);
}
}

.project-info {
    position: relative;
}
.p-meta {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.p-title {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* Relaxed clamp */
    margin-bottom: 1.5rem;
    line-height: 1.1;
    white-space: nowrap; /* Force single line */
}
.p-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 3rem;
    max-width: 90%;
}

.btn-link {
    font-family: var(--font-head);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-link .arrow {
    transition: transform 0.3s var(--ease);
}
.btn-link:hover .arrow {
    transform: translateX(10px);
}
.btn-link:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}
.btn-link.disabled {
    opacity: 0.5;
    pointer-events: none;
    border: none;
}

.btn-badge {
    display: inline-flex;
    align-items: center;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-badge:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}
.btn-badge img {
    height: 40px;
}

.project-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ABOUT */
.about {
    padding: 5rem var(--pad-container);
    background: #0d0d0d;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.about-text p {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 500px;
}
.about-title {
    font-family: var(--font-head);
    font-size: 4rem;
    margin-bottom: 2rem;
    color: #333; /* Very dark text designed for reveal */
    background: linear-gradient(90deg, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
}
.stat-box {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
}
.stat-num {
    display: block;
    font-family: var(--font-head);
    font-size: 4rem;
    color: var(--accent);
}
.stat-label {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* FOOTER */
.footer {
    padding: 10rem var(--pad-container) 2rem;
    background: #000;
}
.footer-cta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 8rem;
}
.footer-cta span {
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}
.email-link {
    font-family: var(--font-head);
    font-size: clamp(2rem, 8vw, 6rem);
    color: #fff;
    transition: color 0.3s ease;
    text-transform: uppercase;
}
.email-link:hover {
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid #1a1a1a;
    padding-top: 2rem;
}
.socials a {
    margin-left: 20px;
    color: #888;
}
.socials a:hover {
    color: #fff;
}

/* MOBILE MENU */
.mobile-menu {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: #0a0a0a;
    z-index: 90;
    clip-path: circle(0% at 90% 5%);
    transition: clip-path 0.8s var(--ease);
    display: flex;
    justify-content: center;
    align-items: center;
}
.mm-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;
}
.mm-link {
    font-family: var(--font-head);
    font-size: 3rem;
    color: var(--text);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}
.mm-link:hover {
    color: var(--accent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: flex; }
    
    .project-item, .project-item.reversed {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
    .visual-wrapper {
        height: 40vh;
    }
    .slide {
        width: 140px;
    }
    .project-item .project-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .project-links {
        margin-left: 0;
    }
    .project-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
    .slider-btn { display: none; }
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    .socials a {
        margin: 0 10px;
    }
}

/* PAGE STYLES */
.page-container {
    padding: 15rem 5vw 5rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    min-height: 100vh;
}
.page-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 1rem;
    color: var(--accent);
    text-transform: uppercase;
}
.page-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.page-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
}
.page-content h2 {
    font-family: var(--font-head);
    color: #fff;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.page-content p {
    margin-bottom: 1.5rem;
}
.page-content ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    list-style-type: none;
}
.page-content li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1rem;
}
.page-content li::before {
    content: '→';
    color: var(--accent);
    position: absolute;
    left: -0.5rem;
}
.page-content strong {
    color: #fff;
    font-weight: 500;
}
.page-content a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    transition: all 0.3s;
}
.page-content a:hover {
    background: var(--accent);
    color: #000;
}

/* SUPPORT PAGE SPECIFIC */
.support-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.support-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 2rem;
    transition: all 0.3s var(--ease);
}
.support-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-5px);
    border-color: var(--accent);
}
.sc-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
    display: block;
}
.sc-title {
    font-family: var(--font-head);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.sc-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}