/* --- Z targetowej strony - style inline --- */
.pulse-glow-light { animation: pulseGlowLight 2s infinite alternate; }
@keyframes pulseGlowLight { 0% { box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); background-color: rgba(56, 189, 248, 0.2); } 100% { box-shadow: 0 0 25px rgba(56, 189, 248, 0.8); background-color: rgba(56, 189, 248, 0.8); } }
.data-stream-vertical { background: linear-gradient(180deg, transparent, #38bdf8, #818cf8, transparent); background-size: 100% 200%; animation: flowStreamVertical 1s infinite linear, flowOpacity 6s infinite; }
@keyframes flowStreamVertical { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }
@keyframes flowOpacity { 0%, 10% { opacity: 0; } 15%, 80% { opacity: 1; } 85%, 100% { opacity: 0; } }
.pop-out-1 { animation: popOut1 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes popOut1 { 0%, 15% { transform: scale(0) translateY(0); opacity: 0; } 25%, 80% { transform: scale(1) translateY(-10px); opacity: 1; } 90%, 100% { transform: scale(0) translateY(0); opacity: 0; } }
.pop-out-2 { animation: popOut2 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes popOut2 { 0%, 18% { transform: scale(0) translateY(0); opacity: 0; } 28%, 80% { transform: scale(1) translateY(-10px); opacity: 1; } 90%, 100% { transform: scale(0) translateY(0); opacity: 0; } }
.pop-out-3 { animation: popOut3 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes popOut3 { 0%, 21% { transform: scale(0) translateY(0); opacity: 0; } 31%, 80% { transform: scale(1) translateY(-10px); opacity: 1; } 90%, 100% { transform: scale(0) translateY(0); opacity: 0; } }
.pop-out-4 { animation: popOut4 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes popOut4 { 0%, 24% { transform: scale(0) translateY(0); opacity: 0; } 34%, 80% { transform: scale(1) translateY(-10px); opacity: 1; } 90%, 100% { transform: scale(0) translateY(0); opacity: 0; } }
.plug-in-vertical-down { animation: plugInVerticalDown 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes plugInVerticalDown { 0%, 5% { transform: translateY(-30px); opacity: 0; } 15%, 85% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(-30px); opacity: 0; } }

/* V2: Magiczna Ekspansja - Light Version */
.v2-center-pulse { animation: pulseGlowV2 3s infinite alternate; }
@keyframes pulseGlowV2 { 0% { box-shadow: 0 0 10px rgba(14, 165, 233, 0.2); } 100% { box-shadow: 0 0 30px rgba(14, 165, 233, 0.5), 0 0 50px rgba(14, 165, 233, 0.2); } }
.v2-node { animation: popOutV2 4s infinite cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
.v2-node-1 { animation-delay: 0.2s; } .v2-node-2 { animation-delay: 0.4s; } .v2-node-3 { animation-delay: 0.6s; } .v2-node-4 { animation-delay: 1.0s; } .v2-node-5 { animation-delay: 1.2s; } .v2-node-6 { animation-delay: 0.8s; }
@keyframes popOutV2 { 0%, 5% { transform: scale(0.5); opacity: 0; border-color: transparent; } 15%, 85% { transform: scale(1); opacity: 1; border-color: #38bdf8; box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.1); } 95%, 100% { transform: scale(0.5); opacity: 0; border-color: transparent; } }

/* Input Node & Flow */
.v2-input-node { animation: pulseInput 4s infinite; }
@keyframes pulseInput { 0%, 100% { transform: scale(1); border-color: #e2e8f0; } 10%, 15% { transform: scale(1.05); border-color: #38bdf8; box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); } }
.v2-input-flow { stroke-dasharray: 8; animation: flowDown 1.5s linear infinite; }
@keyframes flowDown { to { stroke-dashoffset: -16; } }
.v2-hand { animation: pressHand 4s infinite ease-out; transform-origin: top left; }
@keyframes pressHand { 0%, 50%, 100% { opacity: 0; transform: translate(50px, 50px) scale(1); } 5% { opacity: 1; transform: translate(10px, 10px) scale(1); } 10%, 12% { opacity: 1; transform: translate(0px, 0px) scale(0.85); } 18% { opacity: 1; transform: translate(15px, 15px) scale(1); } 30% { opacity: 0; transform: translate(40px, 40px) scale(1); } }
.connection-line { stroke-dasharray: 10; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -20; } }

/* --- Z zewnętrznego pliku servicepage_custom_zg5_pl.css --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc;
}
.light-gradient-bg {
    background: linear-gradient(135deg, #ffffff, #edf2f7);
}
.dark-tech-gradient {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}
.cta-button {
    transition: all 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.benefit-card {
     background: #ffffff;
     border: 1px solid #e2e8f0;
     transition: all 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.module-accordion summary::-webkit-details-marker {
    display: none;
}

/* Wodospad Automatyzacji */
.wf-node { transition: all 0.5s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
.wf-anim-line { position: absolute; background: linear-gradient(90deg, transparent, #38bdf8, transparent); background-size: 200% 100%; animation: wf-line 2s infinite linear; }
@keyframes wf-line { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.wf-item { opacity: 0; transform: translateY(-20px); animation: dropIn 0.8s forwards; }
@keyframes dropIn { to { opacity: 1; transform: translateY(0); } }

/* Bento Box */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px);
    gap: 1rem;
    max-w: 1000px;
    margin: 0 auto;
}
.bento-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}
.bento-card:hover {
    transform: translateY(-5px);
}
.bento-terminal { grid-column: span 2; grid-row: span 2; background: #0f172a; color: #38bdf8; font-family: monospace; }
.terminal-header { display: flex; gap: 6px; margin-bottom: 1rem; border-bottom: 1px solid #334155; padding-bottom: 0.5rem; }
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-dot-r { background: #ef4444; } .terminal-dot-y { background: #eab308; } .terminal-dot-g { background: #22c55e; }
.typewriter { overflow: hidden; white-space: nowrap; animation: typing 4s steps(40, end) infinite; border-right: .15em solid #38bdf8;}
@keyframes typing { from { width: 0 } 50% { width: 100% } 100% { width: 100% } }

.bento-metric { grid-column: span 1; grid-row: span 1; justify-content: center; align-items: center; text-align: center; }
.metric-value { font-size: 3rem; font-weight: 900; line-height: 1; color: #0f172a; }
.metric-label { font-size: 0.875rem; color: #64748b; font-weight: bold; margin-top: 0.5rem; }
.bento-wide { grid-column: span 2; grid-row: span 1; display:flex; flex-direction:row; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #0f172a; }

@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .bento-terminal, .bento-metric, .bento-wide { grid-column: span 1; }
}

#loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%; background: #fff;
    display: flex; justify-content: center; align-items: center; z-index: 9999;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
#loading-overlay.show { opacity: 1; visibility: visible; }
.spinner { border: 4px solid #f1f5f9; width: 36px; height: 36px; border-radius: 50%; border-left-color: #38bdf8; animation: spin 1s infinite linear; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Timeline */
.timeline-container { position: relative; padding: 120px 0 60px 0; }
.timeline-line { position: absolute; top: 158px; left: 0; width: 100%; height: 6px; background: #e2e8f0; z-index: 1; }
.timeline-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #94a3b8 0%, #38bdf8 50%, #0284c7 100%); transition: width 0.1s linear; box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); }
.timeline-point { position: relative; z-index: 2; background: #fff; border: 4px solid #e2e8f0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.timeline-point.active-start { border-color: #94a3b8; background: #f8fafc; }
.timeline-point.active-brand { border-color: #0284c7; background: #fff; transform: scale(1.15); }
.timeline-point.active-goal { border-color: #0284c7; background: #fff; transform: scale(1.45); box-shadow: 0 0 30px rgba(2, 132, 199, 0.5); }

/* Pillars / Grid */
.app-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.module-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s ease; cursor: default; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #cbd5e1; }
.pillar-da { background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; overflow: hidden; }
.pillar-da-header { padding: 24px 28px 20px; border-bottom: 1px solid #f1f5f9; }
.pillar-da-body { padding: 20px 24px 24px; }
.p1-accent { background: linear-gradient(135deg,#6366f1,#4338ca); }
.p2-accent { background: linear-gradient(135deg,#0284c7,#0369a1); }
.p3-accent { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.p4-accent { background: linear-gradient(135deg,#10b981,#059669); }
.p1-text { color: #6366f1; } .p2-text { color: #0369a1; } .p3-text { color: #8b5cf6; } .p4-text { color: #059669; }
.p1-bg-light { background: #eef2ff; } .p2-bg-light { background: #e0f2fe; } .p3-bg-light { background: #f5f3ff; } .p4-bg-light { background: #ecfdf5; }
.p1-border { border-left: 5px solid #6366f1; } .p2-border { border-left: 5px solid #0284c7; } .p3-border { border-left: 5px solid #8b5cf6; } .p4-border { border-left: 5px solid #10b981; }
.module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width:1024px) { .module-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .module-grid { grid-template-columns: repeat(1,1fr); } }

/* Vertical Roadmap */
.road-wrap { display: flex; flex-direction: column; gap: 0; max-width: 620px; margin: 0 auto; }
.road-step { display: flex; align-items: stretch; gap: 20px; }
.road-left { display: flex; flex-direction: column; align-items: center; width: 64px; flex-shrink: 0; }
.road-node { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.road-connector { flex: 1; width: 3px; border-radius: 2px; min-height: 24px; margin: 4px auto; }
.road-right { flex: 1; padding: 10px 0 28px; }
.road-num { font-size: 0.65rem; font-weight: 900; color: #94a3b8; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.road-title { font-size: 1rem; font-weight: 900; color: #0f172a; line-height: 1.2; margin-bottom: 4px; }
.road-body { font-size: 0.8rem; color: #475569; line-height: 1.6; }
.road-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65rem; font-weight: 700; border-radius: 7px; padding: 3px 8px; margin-top: 6px; }

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