:root {
            --blue-primary: #3b82f6;
            --blue-glow: rgba(59, 130, 246, 0.5);
            --bg-dark: #050505;
			--bg-dark-2:#272727;
            --bg-light: #ffffff;
            --card-bg-dark: rgba(255, 255, 255, 0.03);
            --border-dark: rgba(255, 255, 255, 0.08);
            --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

/* Ukryj przewijanie podczas ładowania */
body.loading {
    overflow: hidden;
}

/* Nadpisanie koloru spinnera na Twój firmowy błękit */
#preloader .text-primary {
    color: #3b82f6 !important; /* Twoje --blue-primary */
}

/* Efekt znikania */
#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark-2);
            color: #fff;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        body.light-mode {
            background-color: var(--bg-light);
            color: #0f172a;
        }

        /* --- TŁO --- */
        .ambient-glow {
            position: fixed;
            width: 60vw;
            height: 60vw;
            background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
            top: -20vw;
            left: -10vw;
            z-index: -1;
            filter: blur(100px);
            opacity: 0.4;
            pointer-events: none;
        }

        /* --- NAWIGACJA --- */
        nav {
            padding: 2rem 0;
            transition: var(--transition);
            z-index: 1000;
        }

        nav.scrolled {
            padding: 1rem 0;
            background: rgba(5, 5, 5, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-dark);
        }

        body.light-mode nav.scrolled {
            background: rgba(255, 255, 255, 0.8);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
		
		#themeToggle {
		    background: rgba(255, 255, 255, 0.03);
			border: 1px solid var(--border-dark);
			border-radius:50%;
			width:37px;
			height:37px;
			text-align:center;
			
	
		}
		#themeToggle svg {stroke:#fff;}
		body.light-mode #themeToggle, body.light-mode	#main-nav .btn-contact {
		background: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.07);
			}
		body.light-mode #themeToggle svg {stroke:#666;}
			
		body.light-mode	#main-nav .nav-link-custom:not(.active) {color:#222;}
		
		
	body.light-mode		#hero-elevation .status-badge {  border: 1px solid rgba(0, 0, 0, 0.07);}

        .logo-box {
            background: #fff;
            color: #000;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 20px var(--blue-glow);
        }

 /* --- NAVIGATION (#main-nav) --- */
        #main-nav {
            padding: 1.5rem 0;
            z-index: 1000;
            transition: var(--transition);
        }
		
		.text-primary-custom {color:var(--blue-primary);}

        #main-nav .logo-wrapper {
            display: flex;
            flex-direction: column;
        }

        #main-nav .logo-main {
            font-size: 1.4rem;
            font-weight: 900;
            font-style: italic;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            display: flex;
            align-items: center;
            
        }
			#main-nav .logo-main svg {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #fff;
	fill:#222;
    stroke: transparent;
    padding: 4px;
	margin-right:10px;
}

	body.light-mode	#main-nav .logo-main svg {
    background: #222;
	fill:#fff;
 
}
        #main-nav .logo-sub {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1.2px;
            opacity: 0.65;
            text-transform: uppercase;
            margin-top: 1px;
        }
		#main-nav .logo-sub svg {height:10px;}

        #main-nav .nav-link-custom {
            font-size: 16px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4em;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        #main-nav .nav-link-custom:hover, #main-nav .nav-link-custom.active {
            color: var(--blue-primary);
        }

        #main-nav .v-separator {
            width: 1px;
            height: 20px;
            background: rgba(255,255,255,0.1);
            margin: 0 15px;
        }

        #main-nav .btn-contact {
            background: #fff;
            color: #000;
            font-size: 11px;
            font-weight: 900;
            padding: 10px 25px;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            transition: transform 0.2s;
        }

        #main-nav .btn-contact:hover {
            transform: scale(1.05);
            background: #f0f0f0;
        }
		
		 #demo {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
            position: relative;
        }
		
		

        /* --- HERO SECTION (#hero-elevation) --- */
        #hero-elevation {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
            position: relative;
        }

        #hero-elevation .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-dark);
            padding: 8px 20px;
            border-radius: 50px;
            margin-bottom: 2.5rem;
        }

        #hero-elevation .status-dot {
            width: 6px;
            height: 6px;
            background: var(--blue-primary);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--blue-primary);
        }

        #hero-elevation .status-text {
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
        }

        #hero-elevation .headline {
            font-size: clamp(3.1rem, 7vw, 6rem);
            font-weight: 900;
            line-height: 0.85;
            letter-spacing: -0.06em;
            text-transform: uppercase;
            margin-bottom: 2rem;
        }

        #hero-elevation .text-elevation {
            background: linear-gradient(89deg, #3b82f6 0%, #fff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #hero-elevation .lead-text {
            font-size: 1.2rem;
            line-height: 1.6;
            opacity: 0.5;
            max-width: 520px;
            margin-bottom: 3.5rem;
        }

       .btn-action {
            background: #3b82f6;
            color: #fff;
            border: none;
            padding: 18px 40px;
            border-radius: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: var(--transition);
        }

       .btn-action:hover {
            background: #1d4ed8;
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
			color:#fff !important;
        }

        /* --- SYSTEM UI CANVAS --- */
        .system-canvas {
            background: #0a0a0a47;
            border: 1px solid var(--border-dark);
            border-radius: 32px;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0,0,0,0.8);
            position: relative;
        }

		.bg-dark, .bg-black {background:#0a0a0a47 !important;}
        .system-header {
            padding: 20px 30px;
            border-bottom: 1px solid var(--border-dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .system-workflow {
            padding: 30px;
            position: relative;
        }

        .workflow-step {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-dark);
            border-radius: 16px;
            padding: 25px;
            position: relative;
            z-index: 2;
        }

        .workflow-line {
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, var(--blue-primary), transparent);
            margin: 0 auto;
            position: relative;
        }

        .node-icon {
            width: 32px;
            height: 32px;
            background: #0a0a0a47;
            border: 1px solid var(--blue-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: -16px auto 0;
            position: relative;
            z-index: 3;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
        }
		.node-icon svg {height:16px;}

        .result-box {
            background: #0a0a0a47;
            border-left: 2px solid var(--blue-primary);
            padding: 15px;
            margin-top: 15px;
            font-size: 11px;
            font-style: italic;
            opacity: 0.8;
        }
		
		.region-pill {
			background:transparent !important;
		    padding: 3px 5px  !important;
    border-radius: 5px  !important;
    background: rgba(255, 255, 255, 0.03)  !important;
    border: 1px solid rgba(255, 255, 255, 0.08)  !important;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
	}

        /* --- UTILS --- */
        .text-micro { font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
		
		.fw-black {font-weight:900 !important;}
		
        /* --- NAGŁÓWKI --- */
        .headline {
            font-size: clamp(3rem, 10vw, 8rem);
            font-weight: 900;
            line-height: 0.9;
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }

        .text-gradient {
            background: linear-gradient(to right, #3b82f6, #60a5fa, #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 30px var(--blue-glow));
        }

        /* --- KARTY I ELEMENTY --- */
        .glass-card {
            background: var(--card-bg-dark);
            border: 1px solid var(--border-dark);
            backdrop-filter: blur(12px);
            border-radius: 32px;
            transition: var(--transition);
        }

        .glass-card:hover {
            border-color: var(--blue-primary);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-8px);
        }

        .service-grid-item {
            padding: 4rem;
            border: 1px solid var(--border-dark);
            transition: var(--transition);
            background: transparent;
        }
		 .service-grid-item:nth-child(1) {
            border-top-left-radius: 40px;
        }

        .service-grid-item:nth-child(2) {
            border-top-right-radius: 40px;
        }

        .service-grid-item:nth-child(3) {
            border-bottom-left-radius: 40px;
        }

        .service-grid-item:nth-child(4) {
            border-bottom-right-radius: 40px;
        }
		

        .service-grid-item:hover {
            background: rgba(59, 130, 246, 0.03);
            box-shadow: inset 0 0 50px rgba(59, 130, 246, 0.05);
        }

        /* --- UI CANVAS --- */
        .ui-canvas {
            border-radius: 40px;
            background: #000;
            border: 1px solid var(--border-dark);
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(0,0,0,0.5);
        }

        .scan-line {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--blue-primary), transparent);
            width: 100%;
            position: absolute;
            top: 0;
            animation: scan 4s linear infinite;
            z-index: 5;
        }

        @keyframes scan {
            0% { top: 0%; opacity: 0; }
            50% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        /* --- PRZYCISKI --- */
        .btn-premium {
            background: var(--blue-primary);
            color: #fff;
            padding: 1.2rem 2.5rem;
            border-radius: 16px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border: none;
            box-shadow: 0 15px 30px var(--blue-glow);
            transition: var(--transition);
        }

        .btn-premium:hover {
            transform: scale(1.05);
            box-shadow: 0 20px 40px var(--blue-glow);
            color: #fff;
        }

        /* --- FIXY DLA LIGHT MODE --- */
        body.light-mode .glass-card {
            background: rgba(0, 0, 0, 0.02);
            border-color: rgba(0, 0, 0, 0.05);
        }
		body.light-mode p {color:#111;}
        body.light-mode .text-gradient {
            background: linear-gradient(to right, #1d4ed8, #2563eb);
            -webkit-background-clip: text;
        }

        body.light-mode .service-grid-item {
            border-color: rgba(0, 0, 0, 0.05);
        }

body.light-mode .region-pill, body.light-mode .status-text, 
body.light-mode #hero-elevation .status-text   {color:#666 !important; border-color: rgba(0, 0, 0, 0.05) !important;}

 
body.light-mode .workflow-step, body.light-mode .system-header  {border-color: rgba(59, 130, 246, 0.2);}
body.light-mode .result-box {background: linear-gradient(145deg, #ffffff 0%, #e2ecfe 100%) !important;}
 
body.light-mode #hero-elevation .text-elevation {
    background: linear-gradient(89deg, #3b82f6 0%, #313131 100%);     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
	
body.light-mode 	.node-icon {background:#fff;}
body.light-mode .system-canvas {background:#fff; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.15);}
body.light-mode #legacy-section .right-panel {background:rgba(255,255,255,.5) !important;}

body.light-mode #legacy-section .main-container,
body.light-mode .bg-black, body.light-mode  #main-footer {
    background: linear-gradient(145deg, #ffffff 0%, #e2ecfe 100%) !important;}
	
	
        .opacity-medium { opacity: 0.6; }
        .tracking-mega { letter-spacing: 0.4em; }


		 /* --- NOWA SEKCJA: LEGACY & INTELLIGENCE (#legacy-section) --- */
        #legacy-section {
            padding: 4rem 0 8rem 0;
        }

        #legacy-section .main-container {
                background: linear-gradient(145deg, #0c0c0c0a 0%, #0a0a0a47 100%);
            border: 1px solid var(--border-dark);
            border-radius: 40px;
            padding: 5rem;
            position: relative;
            overflow: hidden;
        }

        .title .label-top {
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: var(--blue-primary);
            margin-bottom: 2rem;
            display: block;
        }

        .title .section-title {
            font-size: clamp(2.1rem, 4vw, 3.5rem);
            line-height: 1;
            margin-bottom: 1.5rem;
            max-width: 600px;
        }

        .title-description {
            font-size: 1.1rem;
            opacity: 0.65;
            line-height: 1.6;
            max-width: 550px;
            margin-bottom: 4rem;
        }

        #legacy-section .stat-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        #legacy-section .stat-icon {
            color: var(--blue-primary);
        }

        #legacy-section .stat-label {
            font-size: 1.2rem;
            font-weight: 900;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        #legacy-section .stat-sub {
            font-size: 9px;
            font-weight: 700;
            opacity: 0.4;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        #legacy-section .right-panel {
              background: #00000021;
            border-radius: 30px;
            height: 100%;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        #legacy-section .badge-circle {
            width: 150px;
            height: 150px;
            border: 2px dashed rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
        }

        #legacy-section .est-year {
            font-size: 3rem;
            font-weight: 900;
            font-style: italic;
            letter-spacing: -0.02em;
            margin-bottom: 2rem;
        }

        #legacy-section .region-pills {
            display: flex;
            gap: 10px;
        }

        #legacy-section .region-pill {
            font-size: 8px;
            font-weight: 900;
            padding: 8px 16px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            letter-spacing: 1px;
            color: rgba(255,255,255,0.6);
        }

        /* --- NOWA STOPKA (#main-footer) --- */
        #main-footer {
            padding: 6rem 0 3rem 0;
            border-top: 1px solid var(--border-dark);
        }

        #main-footer .footer-logo-text {
            font-size: 1.8rem;
            font-weight: 900;
            font-style: italic;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            margin-bottom: 1rem;
            display: block;
        }

        #main-footer .footer-tagline {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.3em;
            opacity: 0.4;
            text-transform: uppercase;
            margin-bottom: 2rem;
        }

        #main-footer .powered-by {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
        }

        #main-footer .powered-by a {
            color: var(--blue-primary);
            text-decoration: none;
        }

        #main-footer .footer-label {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            margin-bottom: 2rem;
            display: block;
        }

        #main-footer .footer-link {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fff;
            text-decoration: none;
            opacity: 0.5;
            transition: opacity 0.3s;
            display: block;
            margin-bottom: 1.2rem;
        }

        #main-footer .footer-link:hover {
            opacity: 1;
        }

        #main-footer .bottom-bar {
            margin-top: 5rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.03);
            display: flex;
            justify-content: space-between;
            font-size: 9px;
            font-weight: 700;
            opacity: 0.25;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
		
		
		
		 /* --- SERVICE GRID & PRICING ITEMS STYLE --- */
        .service-grid-item, .pricing-card, .pricing-card-more {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border-dark);
            padding: 2.2rem;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
		
		body.light-mode   .pricing-card {border-color: rgba(59, 130, 246, 0.1);}

		body.light-mode  .btn-outline-light {border-color: rgba(59, 130, 246, 0.3) !important; color:#333;}
        .pricing-card > *:not(.bg-icon) {
            position: relative;
            z-index: 2;
        }

body.light-mode #main-footer .footer-link, body.light-mode #main-footer .powered-by {color:#333;}
        .bg-icon {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 180px;
            height: 180px;
            opacity: 0.02;
            z-index: 0;
            pointer-events: none;
            transform: rotate(-15deg);
            color: #ffffff;
            transition: var(--transition);
        }
		body.light-mode .bg-icon {color: #000;}
		
		
        .pricing-card:hover .bg-icon {
            transform: rotate(0deg) scale(1.1);
            opacity: 0.04;
        }

        .pricing-card.featured .bg-icon {
            color: var(--blue-primary);
            opacity: 0.05;
        }

        .pricing-card.featured:hover .bg-icon {
            opacity: 0.08;
        }

        .service-grid-item:hover, .pricing-card:hover {
            background: rgba(255, 255, 255, 0.04) !important;
            border-color: rgba(59, 130, 246, 0.3) !important;
        }

        .pricing-card.featured {
            border-color: var(--blue-primary) !important;
            background: rgba(59, 130, 246, 0.03);
        }

        .pricing-card.featured::after {
            content: "RECOMMENDED";
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 8px;
            font-weight: 900;
            color: var(--blue-primary);
            letter-spacing: 2px;
            z-index: 3;
        }

        /* Logic for rounded corners in a 3-column pricing setup */
        .pricing-col .pricing-card-1 {
            border-top-left-radius: 40px;
			border-bottom-left-radius: 40px;
        }

        .pricing-col  .pricing-card-2 {
            /* Środkowy może być prosty lub lekko zaokrąglony góra/dół */
        }

        .pricing-col .pricing-card-3 {
            border-top-right-radius: 40px;
            border-bottom-right-radius: 40px;
        }
        
        /* Obsługa mobilna dla zaokrągleń */
        @media (max-width: 991px) {
            .pricing-col .pricing-card { border-radius: 20px !important; margin-bottom: 20px; }
        }

        /* Stylistyka listy w pakietach */
        .pricing-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pricing-list li {
            font-size: 13px;
            opacity: 0.6;
            margin-bottom: 12px;
            display: flex;
            align-items: start;
            gap: 10px;
        }

        .pricing-list li i {
            color: var(--blue-primary);
			min-width:20px;
        }
		.pricing-list li svg {
            stroke: var(--blue-primary);
			min-width:20px;
        }

        .price-tag {
            font-size: 3rem;
            font-weight: 900;
            letter-spacing: -0.05em;
            margin-top: 1rem;
        }

        .price-tag span {
            font-size: 1.1rem;
            opacity: 0.6;
            font-weight: 400;
			letter-spacing:2px;
        }



		 /* --- PAGES LOGIC --- */
        .page {
            display: none;
            animation: fadeIn 0.4s ease-out;
        }
        
        .page.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
		
		
		
		
		
		
		
		
		 /* --- DEMO SECTION STYLES --- */
        .demo-monitor {
            background: #111;
            border: 8px solid #222;
            border-radius: 20px;
            position: relative;
            padding-bottom: 56.25%; /* 16:9 ratio */
            box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 20px rgba(59, 130, 246, 0.1);
        }

body.light-mode .demo-monitor {
    background: #e3e3e3;
    border: 8px solid #ededed; }
	
	body.light-mode .demo-monitor  + div {background:#bbb !important;}
	body.light-mode .demo-monitor  + div + div  {background:#ddd !important;}
	
        .demo-screen {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            margin: 10px;
            border-radius: 10px;
            overflow: hidden;
            color: #333;
            display: flex;
            flex-direction: column;
        }

        .browser-toolbar {
            background: #f1f1f1;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid #ddd;
        }

        .browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; }
        .browser-address {
            background: #fff;
            border-radius: 4px;
            padding: 2px 10px;
            font-size: 10px;
            flex-grow: 1;
            color: #999;
            font-family: monospace;
        }

        .article-viewport {
            flex-grow: 1;
            overflow-y: auto;
            padding: 25px;
            background: #0000005e;
        }
		
		body.light-mode .article-viewport {
   background: #fdfdfd;
   
}
.bg-light {background: #cccc !important;}
body.light-mode .bg-light {background:#efefef !important;}



        .ai-entity-tag {
            background: rgba(59, 130, 246, 0.1);
            border: 1px dashed var(--blue-primary);
            color: var(--blue-primary);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            margin: 0 2px;
            cursor: help;
        }

        .ai-meta-overlay {
            position: absolute;
            top: 60px;
            right: 30px;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(5px);
            border: 1px solid var(--blue-primary);
            color: #00ffcc;
            font-family: monospace;
            padding: 15px;
            font-size: 10px;
            width: 200px;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            z-index: 10;
        }

        .demo-info-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-dark);
            border-radius: 24px;
            padding: 40px;
            height: 100%;
        }
				
body.light-mode  .demo-info-card {
		background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
		}
		
body.light-mode  .demo-info-card .text-white {color:#000 !important;}
        .feature-icon-box {
            width: 48px;
            height: 48px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: var(--blue-primary);
        }
		
		
		
		
		  /* --- SHOWROOM SECTION (LIGHT UI) --- */
        .showroom-container {
          
        }

        .premium-badge {
            background: #3b82f6;
            color: #fff;
            font-size: 10px;
            font-weight: 900;
            padding: 4px 12px;
            border-radius: 6px;
            text-transform: uppercase;
            margin-right: 15px;
        }

        .showroom-title {
            font-weight: 900;
            font-size: 2.5rem;
            letter-spacing: -0.02em;
            text-transform: uppercase;
        }

        .filter-bar {
            background: #0a0a0a47;
           border: 1px solid #333;
            border-radius: 20px;
            padding: 25px 30px;
            margin-top: 30px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .filter-label {
            font-size: 9px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px;
            width: 100%;
            margin-bottom: 5px;
        }

        .custom-check {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
        }

        .custom-check input {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid #cbd5e1;
        }

        .ai-ready-index-label {
            color: #3b82f6;
            font-style: italic;
        }

        /* INVESTOR CARDS */
        .invest-card {
            background: #0a0a0a47;
            border: 1px solid #333;
            border-radius: 24px;
            padding: 0;
            height: 100%;
            transition: var(--transition);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

		 body.light-mode .invest-card ,  body.light-mode .filter-bar {
            background: #fff;  border: 1px solid #e2e8f0;
			}
			
        .invest-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(0,0,0,0.05);
            border-color: #3b82f6;
        }

        .card-header-visual {
            padding: 30px;
            position: relative;
            min-height: 120px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }

        .logo-placeholder {
    width: 80px;
    height: 80px;
    background: #00000024;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
    padding: 10px;
    border: 1px dashed #bbbbbb3d;
}

        .badge-stack {
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: flex-end;
        }

        .s-badge {
            font-size: 8px;
            font-weight: 900;
            padding: 4px 10px;
            border-radius: 4px;
            color: #fff;
            text-transform: uppercase;
        }
        .bg-ai { background: #0f172a; }
        .bg-breeam { background: #10b981; }
        .bg-leed { background: #3b82f6; }

        .card-body-content {
            padding: 0 30px 30px;
            flex-grow: 1;
        }

        .card-title {
            font-weight: 900;
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .card-sector {
            font-size: 9px;
            font-weight: 800;
            color: #3b82f6;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }

        .card-desc {
            font-size: 14px;
            color: #64748b;
            font-style: italic;
            line-height: 1.5;
            margin-bottom: 25px;
        }

        .doc-link-box {
            background: #f8fafc0a;;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .doc-label {
            font-size: 9px;
            font-weight: 800;
           
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .doc-title {
            font-size: 13px;
            font-weight: 700;
        
            display: flex;
            align-items: center;
            gap: 10px;
        }
		.btn-outline-light {border-color:#45454547;}
        .card-footer-custom {
               border-top: 1px solid #45454547;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 9px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
        }
		
		 #demo-slide {
            position: relative;
            height: 100%;
            width: 100%;
			min-height:100vh;
			overflow:hidden;
        }

        .slide {
            height:0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease, visibility 0.6s;
            display: flex;
            flex-direction: column;
        }

        .slide.active {
            opacity: 1;
			height:auto;
            visibility: visible;
        }

        .slider-dots {
            position: absolute;
            top: 115px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 20;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #cbd5e1;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: var(--blue-primary);
            width: 24px;
            border-radius: 10px;
        }
		
		
		.hero-slider-container { width: 100%; }
		  /* Slick Dots Customization */
        .slick-dots { bottom: -50px; text-align: left; left: 0; }
        .slick-dots li { margin: 0 5px; width: 15px;  }
        .slick-dots li button:before { display: none; }
        .slick-dots li button {
            width: 100%; height: 4px; background: #cbd5e1;; 
            border-radius: 2px; transition: all 0.3s;  border-radius: 10px;
        }
	 
		.slick-dots li.slick-active { width: 40px;}
        .slick-dots li.slick-active button {
            background: var(--blue-primary) !important; width: 40px;
        }
		
		  .scanner { z-index:11; position: absolute; top: 0; left: 0; width: 100%; height: 2px; 
		  background: linear-gradient(90deg, transparent, var(--blue-primary), transparent); animation: scan 4s linear infinite; }
        @keyframes scan { 0% { top: 0; opacity: 0; } 5% { opacity: 0.5; } 95% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } }
		
		
		 
		
		
		.navbar-toggler {}
	

/* Animacja ikony hamburgera */
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler[aria-expanded="true"] svg { color: var(--blue-primary) !important; }


.slider-arrow {
 
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
   margin-left:auto;
   float:right;
    transition: var(--transition);
  
    }

    .slider-arrow:hover {
        background: var(--blue-primary);
        border-color: var(--blue-primary);
        box-shadow: 0 0 20px var(--blue-glow);
    }

    body.light-mode .slider-arrow {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
        color: #000;
    }
    
    /* Ukrycie strzałki na bardzo małych ekranach (opcjonalnie) */
    @media (max-width: 768px) {
        .slider-arrow { width: 40px; height: 40px; right: 10px; }
 
    #main-nav {
        padding: 1rem 0 !important;
        background: rgba(5, 5, 5, 0.95); /* Ciemne tło na mobile */
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-dark);
    }
    
    body.light-mode #main-nav {
        background: rgba(255, 255, 255, 0.95);
    }

    .navbar-collapse {
        margin-top: 1rem;
        border-top: 1px solid var(--border-dark);
    }

    #main-nav .nav-link-custom {
        display: block;
        padding: 1.5rem 0;
        letter-spacing: 0.2em;
        font-size: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    #main-nav .logo-main { font-size: 1.1rem; }
    #main-nav .logo-sub { font-size: 7px; }
	
	
	.btn-action {padding:15px !important; width:100%; text-align:center; justify-content:center;}
	#hero-elevation {padding-top:120px !important;}
	#hero-elevation .headline {font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
	.title .section-title, .showroom-title {font-size: clamp(1.8rem, 3vw, 3rem);}
	.title-description {margin-bottom:1rem !important;}
	#legacy-section .est-year {font-size: 2rem;}
	
	.fs-5 {font-size: 1.05rem !important;}
	.mb-5 {margin-bottom:1rem !important;}
	
	.system-header, .system-workflow, .demo-info-card {padding:15px !important;}
	.service-grid-item, .pricing-card, .main-container { padding: 1.5rem !important; }
	
	.system-canvas, .service-grid-item, .pricing-card, .main-container  {border-radius:15px !important;}
	#legacy-section { padding: 3rem  5px;}
	#services {padding-top:2rem !important;}
	.service-grid-item { margin-bottom: 15px !important;}
	.service-grid-item  .mb-4 { margin-bottom: 1rem !important;}
	.pricing-card {gap:.5rem;}
	.pricing-card  .mt-4 { margin-top: .5rem !important;}
	.pricing-col {padding-bottom:15px;}
	
	
	.demo-monitor {padding-bottom:90%;}
	.browser-toolbar {
 
		padding: 4px;

		gap: 4px;
	 
		font-size: 10px;
	}
	.browser-address {font-size:6px;}
	.filter-bar, .premium-badge, .feature-icon-box, .btn-action svg {display:none;}
	.slider-dots {top:auto; bottom:20px;}
	.slide .showroom-title {width:80%;}
	#page3 {padding-top:2.5rem !important;}
	
	#contactForm .g-4 {--bs-gutter-y: .5rem;}
	
	.system-canvas {display:none;}
	
	#legacy-section .stat-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-direction: column;
	text-align:center;
	
	
}
#legacy-section .right-panel {min-height:290px;}
#legacy-section .badge-circle {
    width: 110px;
    height: 110px;}
	
	#main-nav {padding:0 !importnat;}

}




/* Karta kontaktu */
        .contact-card {
            max-width: 400px;
            border-radius: 25px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            background-color: #fff;
            position: relative;
            overflow: hidden;
            padding: 30px;
        }

        /* Dekoracyjny akcent w rogu */
        .contact-card::before {
            content: "";
            position: absolute;
            top: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            background-color: #f0f7ff;
            border-radius: 50%;
            z-index: 0;
        }

        .card-content { position: relative; z-index: 1; }

        .profile-img {
            width: 80px;
            height: 80px;
            border-radius: 15px;
            object-fit: cover;
        }

        .name-title h5 {
            font-weight: 800;
            margin-bottom: 2px;
        }

        .job-title {
            font-size: 0.75rem;
            font-weight: 700;
            color: #3b71ca;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Stylizacja rzędów z ikonami */
        .info-row {
            display: flex;
            align-items: top;
            margin-bottom: 12px;
            font-size: 0.95rem;
        }

        .icon-box {
            width: 36px;
			min-width:36px;
            height: 36px;
            background-color: #f8f9fa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #6c757d;
        }

        .icon-box i { width: 18px; height: 18px; }
        
        .info-text { margin-bottom: 0; }
		
		
		
		    /* Styl dla ukrywania pozostałych kart */
        .pricing-col.fade-out {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            display: none; /* Całkowite usunięcie z układu, by zwolnić miejsce */
        }

        /* Styl dla aktywnej kolumny, aby zajęła lewą stronę (4/12) */
        .pricing-col.active-focus {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
            display: block !important;
        }

        /* Styl dla rozwijanej karty z opisem (8/12) */
        .pricing-col-more.active-show {
            display: block !important;
            flex: 0 0 66.666667%;
            max-width: 66.666667%;
            animation: fadeInRight 0.5s forwards;
        }

        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Responsywność dla mobile */
        @media (max-width: 991px) {
            .pricing-col.active-focus, .pricing-col-more.active-show {
                flex: 0 0 100%;
                max-width: 100%;
            }
			
			  .btn-action {
            font-size:12px;
            padding: 18px;
            gap: 10px;
			  }
			.engine-card {padding:1.2rem 1rem !important;}
			.step-bg-number { font-size: 6rem !important; }
			.engine-icon-box {width:30px; height:30px; min-width:30px;}
			.engine-icon-box svg {min-width:20px; width:20px;}
			.h6, h6 { font-size: .9rem;}
			
			#methodologyModal .p-5.position-relative {padding:1.4rem 1rem !important;}
			.btn-close {z-index:10;}
			.price-tag {font-size: 2rem; }
			.service-grid-item, .pricing-card, .pricing-card-more {padding:1.2rem 1rem !important;}
			
			.subbb {position:relative !important; top:10px; bottom:0 !important; display: block !important; font-size: .9rem; line-height:1.1 !important; padding-right:20%;}
			.infot-text-sm {font-size:.7rem; height:50px; overflow-y:scroll;}
        }