:root {
    /* === PRINTSTREAM PALETTE === */
    --ps-bg: #ffffff;
    --ps-bg-alt: #f0f2f5; 
    --ps-text-primary: #14151a;
    --ps-text-secondary: #525860;
    --ps-line-accent: #000000;
    --ps-border-color: #dde1e6; 
    --ps-neon-blue: #00e5ff;  
    --ps-neon-violet: #7f00ff; 
    --ps-neon-pink: #ff00aa;   
    --ps-gradient-accent: linear-gradient(90deg, var(--ps-neon-blue), var(--ps-neon-violet), var(--ps-neon-pink));
    --ps-pearl-gradient: linear-gradient(135deg, hsla(180, 70%, 95%, 0.7), hsla(300, 70%, 97%, 0.7), hsla(330, 80%, 97%, 0.7), hsla(60, 80%, 96%, 0.7), hsla(180, 70%, 95%, 0.7));

    --primary-color: var(--ps-bg);
    --secondary-color: var(--ps-bg-alt);
    --text-color: var(--ps-text-primary);
    --accent-color: var(--ps-neon-blue); 

    --glow-color-blue: rgba(0, 229, 255, 0.4); 
    --glow-color-violet: rgba(127, 0, 255, 0.4);

    --card-bg: var(--ps-bg);
    --border-glow-violet: 0 0 8px var(--glow-color-blue); 
}

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

body {
    font-family: 'Exo 2', sans-serif; /* ZMIANA CZCIONKI */
    background-color: var(--primary-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none; 
    font-weight: 400;
}

.cursor-dot,
.cursor-outline {
    pointer-events: none;
    position: fixed;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 1; 
    transition: transform 0.1s ease-out, border-color 0.3s ease, opacity 0.3s ease;
    z-index: 9999; 
}

.cursor-dot {
    width: 8px; 
    height: 8px;
    background-color: var(--ps-line-accent); 
}

.cursor-outline {
    width: 30px; 
    height: 30px;
    border: 2px solid var(--ps-line-accent); 
    opacity: 0.5; 
}

/* Header & Nav - bez zmian */
header { position: fixed; top: 0; left: 0; width: 100%; padding: 1rem 5%; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); z-index: 1000; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ps-border-color); }
.logo { font-size: 1.8rem; font-weight: 700; color: var(--ps-line-accent); background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; text-fill-color: initial; flex-shrink: 0; }
.logo .highlight { color: var(--ps-neon-violet); text-shadow: 0 0 6px var(--glow-color-violet); }
nav ul { list-style: none; display: flex; align-items: center; }
nav ul li { margin-left: 1.8rem; }
nav ul li a { color: var(--ps-text-secondary); text-decoration: none; font-weight: 400; transition: color 0.3s ease, text-shadow 0.3s ease; padding: 0.5rem 0.2rem; position: relative; letter-spacing: 0.5px; }
nav ul li a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; margin: auto; width: 0; height: 2px; transition: width 0.3s ease; } 
nav ul li a:hover { color: var(--ps-neon-blue); text-shadow: 0 0 5px var(--glow-color-blue); }
nav ul li a:hover::after { width: 100%; }
.social-icon svg { transition: transform 0.3s ease, fill 0.3s ease; fill: var(--ps-text-secondary); }
.social-icon:hover svg { fill: var(--ps-neon-blue); transform: scale(1.2); }

/* Hero Section - bez zmian */
#hero { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; padding: 0 5%; background-color: var(--ps-bg); }
.parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('tlo.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; opacity: 0.1; z-index: 0; }
.hero-content { position: relative; z-index: 1; max-width: 55%; margin-right: 40%; text-align: left; }
.hero-content h1.gradient-text { font-size: 3.3rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.25; color: var(--ps-text-primary); background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; text-shadow: none; filter: none; }
.hero-content h1.gradient-text .printstream-highlight { background: var(--ps-gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; padding: 0 0.05em; }
.hero-content p { font-size: 1.05rem; margin-bottom: 2rem; color: var(--ps-text-secondary); line-height: 1.65; text-shadow: none; }
.cta-button { display: inline-block; padding: 0.8rem 2rem; background: var(--ps-line-accent); color: var(--ps-bg); text-decoration: none; font-weight: 700; font-size: 0.95rem; border-radius: 4px; border: 2px solid var(--ps-line-accent); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; position: relative; z-index: 1; font-family: 'Exo 2', sans-serif; /* ZMIANA CZCIONKI */ text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.cta-button::before { content: none; }
.cta-button:hover { background: var(--ps-bg); color: var(--ps-neon-blue); border-color: var(--ps-neon-blue); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 229, 255, 0.3); }
.cta-button:active { transform: translateY(0px) scale(0.98); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 8px rgba(0, 229, 255, 0.2); }
.floating-element { display: none; } 

/* Ogólny styl dla nagłówków sekcji H2 - bez zmian */
#services h2, #about h2, #how-it-works h2, #contact h2 { text-align: center; font-size: 2.2rem; font-weight: 700; margin-bottom: 3rem; color: var(--ps-text-primary); text-shadow: none; position: relative; padding-bottom: 0.75rem; }
#services h2::after, #about h2::after, #how-it-works h2::after, #contact h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background: var(--ps-gradient-accent); }

/* Services Section - bez zmian */
#services { padding: 5rem 5%; background-color: var(--ps-bg-alt); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.service-card { background: var(--ps-bg); padding: 2rem 1.5rem; border-radius: 6px; text-align: center; border: 1px solid var(--ps-border-color); box-shadow: 0 3px 8px rgba(20, 21, 26, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; background: linear-gradient(45deg, transparent 44%, var(--ps-neon-blue) 45%, var(--ps-neon-blue) 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--ps-neon-blue) 45%, var(--ps-neon-blue) 55%, transparent 56%); opacity: 0.6; transition: opacity 0.3s ease, transform 0.3s ease; }
.service-card:hover::before { opacity: 1; transform: rotate(180deg) scale(1.1); }
.service-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; transition: width 0.4s ease-in-out; } 
.service-card:hover::after { width: 100%; }
.service-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 8px 25px rgba(20, 21, 26, 0.08); border-color: var(--ps-neon-blue); background-color: #fdfdff; }
.service-card .service-icon img { width: 45px; height: 45px; margin-bottom: 1rem; filter: grayscale(1) contrast(0.1) brightness(1.1); transition: filter 0.3s ease, transform 0.4s ease; }
.service-card:hover .service-icon img { filter: none; transform: scale(1.15) rotate(5deg); }
.service-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ps-text-primary); transition: color 0.3s ease; }
.service-card:hover h3 { color: var(--ps-neon-blue); }
.service-card p { font-size: 0.85rem; color: var(--ps-text-secondary); line-height: 1.55; }

/* About Section */
#about { padding: 5rem 5%; background-color: var(--ps-bg); }
.about-content { display: flex; align-items: center; gap: 2rem; }
.about-text { flex: 1.5; }
#about .about-text > p { color: var(--ps-text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; }
.about-text ul { list-style: none; padding-left: 0; }
.about-text ul li { color: var(--ps-text-primary); font-size: 1rem; margin-bottom: 0.6rem; transition: transform 0.3s ease, color 0.3s ease, padding-left 0.3s ease; padding-left: 0px; position: relative; }
.about-text ul li::before { content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%) scaleX(0); transform-origin: left; width: 10px; height: 2px; background-color: var(--ps-neon-blue); transition: transform 0.3s ease; }
.highlight-check { color: var(--ps-neon-blue); margin-right: 0.6em; font-weight: 700; display: inline-block; transition: transform 0.3s ease, text-shadow 0.3s ease; }
.about-text ul li.list-item-hover:hover { color: var(--ps-neon-blue); padding-left: 10px; }
.about-text ul li.list-item-hover:hover::before { transform: translateY(-50%) scaleX(1); }
.about-text ul li.list-item-hover:hover .highlight-check { transform: scale(1.3) rotate(-5deg); text-shadow: 0 0 8px var(--glow-color-blue); }

.about-visual { 
    display: flex; 
    flex: 1; 
    justify-content: space-around; 
    align-items: center;
    perspective: 800px; 
    min-height: 350px; 
    position: relative;
    transform-style: preserve-3d;
    gap: 2rem;
}

.heart-animation-container,
.second-shape-container {
    width: 280px;  
    height: 280px; 
    position: relative; 
    transform-style: preserve-3d; 
    transition: transform 0.1s linear; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.printstream-heart-svg,
.printstream-second-svg {
    width: 100%; 
    height: 100%; 
    display: block; 
    overflow: visible; 
    filter: drop-shadow(0px 0px 10px var(--ps-neon-violet)); 
}

.printstream-heart-svg g path,
.printstream-second-svg g path {
    fill: transparent; 
    stroke: var(--ps-neon-violet); 
    stroke-width: 6; 
    transition: stroke 0.3s ease, filter 0.3s ease;
}

.heart-animation-container:hover .printstream-heart-svg g path,
.second-shape-container:hover .printstream-second-svg g path {
    stroke: var(--ps-neon-blue); 
    filter: drop-shadow(0px 0px 15px var(--ps-neon-blue));
}

/* === ZMIANA ANIMACJI DLA DRUGIEGO KSZTAŁTU === */
.heart-animation-container {
    animation: shape3DSpin1 20s linear infinite; 
}
.second-shape-container {
    animation: shape3DSpin1 25s linear infinite; 
}

@keyframes shape3DSpin1 { 
    0% { transform: rotateX(0deg) rotateY(0deg); }
    50% { transform: rotateX(10deg) rotateY(180deg); } 
    100% { transform: rotateX(0deg) rotateY(360deg); } 
}

/* How We Work Section - bez zmian */
#how-it-works { padding: 5rem 5%; background-color: var(--ps-bg-alt); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } 
.step-card { background: var(--ps-bg); padding: 1.8rem 1.5rem; border-radius: 6px; border: 1px solid var(--ps-border-color); box-shadow: 0 3px 8px rgba(20, 21, 26, 0.04); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.step-card:hover { transform: translateY(-6px); border-color: var(--ps-neon-violet); box-shadow: 0 5px 15px rgba(127, 0, 255, 0.1); }
.step-number-container { margin-bottom: 0.8rem; border: 2px solid var(--ps-neon-violet); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.3s ease, border-color 0.3s ease; }
.step-card:hover .step-number-container { /* Efekt perłowy */ }
.step-number { font-size: 1.5rem; font-weight: 700; color: var(--ps-neon-violet); line-height: 1; text-shadow: none; transition: color 0.3s ease; }
.step-card:hover .step-number { color: var(--ps-bg); }
.step-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--ps-text-primary); margin-bottom: 0.5rem; }
.step-content p { font-size: 0.85rem; line-height: 1.5; color: var(--ps-text-secondary); margin: 0; }

/* Contact Section */
#contact { padding: 5rem 5%; background-color: var(--ps-bg); }
#contact input, #contact textarea { 
    width: 100%; 
    padding: 0.8rem 1rem; 
    line-height: 1.5; 
    border: 1px solid var(--ps-border-color); 
    background-color: var(--ps-bg-alt); 
    color: var(--ps-text-primary); 
    border-radius: 4px; 
    font-size: 0.9rem; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
    font-family: 'Exo 2', sans-serif !important; /* ZMIANA CZCIONKI */
}
#contact input::placeholder, #contact textarea::placeholder { 
    font-family: 'Exo 2', sans-serif !important; /* ZMIANA CZCIONKI */
    color: var(--ps-text-secondary); 
    opacity: 0.7; 
}
#contact input:focus, #contact textarea:focus { outline: none; border-color: var(--ps-neon-blue); box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.15); }
#contact textarea { resize: vertical; }
#contact button { justify-self: center; } 

/* Footer - bez zmian */
footer { text-align: center; padding: 2rem 5%; background-color: var(--ps-bg-alt); border-top: 1px solid var(--ps-border-color); font-size: 0.8rem; }
footer p { margin-bottom: 0.4rem; color: var(--ps-text-secondary); }

/* Klasy do animacji przy przewijaniu - bez zmian */
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.animate-delay-1 { transition-delay: 0.1s; }
/* ... reszta klas opóźnień bez zmian ... */

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

/* Responsywność */
@media (max-width: 992px) {
    .hero-content { max-width: 100%; margin-right: 0; text-align: center;} 
    .parallax-bg { background-position: center top; opacity: 0.08; } 
    #about .about-content { flex-direction: column-reverse; }
    .about-text { flex: none; width:100%; }
    .about-visual { min-height: 320px; flex-direction: column; gap: 1.5rem; } 
    .heart-animation-container, .second-shape-container { width: 220px; height: 220px; } 
    .steps-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } 
}
@media (max-width: 768px) {
    header { padding: 0.8rem 3%; }
    nav ul li { margin-left: 0.8rem; } 
    .logo { font-size: 1.5rem; }
    .hero-content h1.gradient-text { font-size: 2.5rem; } 
    .hero-content p { font-size: 1rem; }
    #about .about-text > p { font-size: 1rem; }
    #about .about-text ul li { font-size: 0.9rem; }
    .about-visual { margin-bottom: 2rem; margin-top: 1rem; min-height: auto; flex-direction: row; width: 100%; justify-content: space-around;}
    .heart-animation-container, .second-shape-container { width: 120px; height: 120px; } 
    #services h2, #about h2, #how-it-works h2, #contact h2 { font-size: 2rem; }
    .services-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    #contact input, #contact textarea { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    nav ul li a { font-size: 0.75rem; padding: 0.5rem 0.05rem;}
    .hero-content h1.gradient-text { font-size: 2rem; } 
    .hero-content p { font-size: 0.85rem; }
    #about .about-text > p { font-size: 0.9rem; }
    #about .about-text ul li { font-size: 0.8rem; }
    .cta-button { padding: 0.7rem 1.5rem; font-size: 0.85rem; }
    .logo { font-size: 1.4rem; }
    #services, #about, #how-it-works, #contact { padding-top: 3.5rem; padding-bottom: 2.5rem; }
    #services h2, #about h2, #how-it-works h2, #contact h2 { font-size: 1.7rem; margin-bottom: 1.5rem; }
    .about-visual { padding: 1rem 0;}
    .heart-animation-container, .second-shape-container { width: 100px; height: 100px; } 
}

@media (max-width: 1024px) { 
    body {
        cursor: auto !important;
    }
    .cursor-dot,
    .cursor-outline {
        display: none !important; 
    }
}

/* Efekt perłowy/irydescencyjny */
.printstream-pearl-effect,
nav ul li a:hover::after,
.service-card:hover::after,
.step-card:hover .step-number-container {
    background: var(--ps-pearl-gradient) !important; 
    background-size: 250% 250% !important; 
    animation: printstreamShimmer 5s ease infinite; 
}

@keyframes printstreamShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}