:root {
    --color-bg: #FFFFFF;
    --color-text: #212529;
    --color-accent-gradient: linear-gradient(90deg, #6A82FB 0%, #FC5C7D 100%);
    --font-primary: 'Inter', sans-serif;
}
body { background-color:var(--color-bg); color:var(--color-text); font-family:var(--font-primary); margin:0; line-height:1.6; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
#background-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
.header { padding:20px 0; }
.header nav { display:flex; justify-content:space-between; align-items:center; }

/* Stare style dla .logo i .logo img zostały usunięte */
/* Jeśli chcesz zachować selector języka na górze, upewnij się, że .language-selector ma odpowiednie style */

/* --- NOWE STYLE DLA LOGO W SEKCJI HERO --- */
.hero-logo {
    width: 150px; /* Szerokość logo, możesz dostosować */
    height: auto; /* Zachowaj proporcje */
    margin-bottom: 25px; /* Odstęp pod logo od nagłówka H1 */
    display: block; /* Upewnij się, że logo jest blokiem, aby margin auto działał */
    margin-left: auto; /* Wyśrodkuj logo w poziomie */
    margin-right: auto; /* Wyśrodkuj logo w poziomie */
}
/* Dostosowania dla mniejszych ekranów, jeśli logo jest za duże */
@media (max-width: 768px) {
    .hero-logo {
        width: 120px; /* Mniejsze logo na urządzeniach mobilnych */
        margin-bottom: 20px;
    }
}


.hero { min-height:90vh; display:flex; justify-content:center; align-items:center; text-align:center; }
.hero-content h1 { font-size:3.8rem; font-weight:700; margin-bottom:1rem; }
.hero-content p { font-size:1.2rem; font-weight:300; max-width:600px; margin:0 auto 2.5rem auto; color:#555; }
.countdown { display:flex; justify-content:center; gap:20px; margin:2.5rem 0; }
.countdown div { background:#f8f9fa; border:1px solid #e9ecef; padding:15px 25px; border-radius:8px; font-size:1rem; color:#333; }
.countdown span { display:block; font-size:2.5rem; font-weight:600; color:var(--color-text); }
.signup-form { display:flex; justify-content:center; gap:10px; }
.signup-form input { padding:15px; font-size:1rem; border-radius:88px; border:1px solid #ced4da; width:300px; transition:all 0.3s ease; }
.signup-form input:focus { outline:none; border-color:#6A82FB; box-shadow:0 0 0 3px rgba(106, 130, 251, 0.2); }
.signup-form button { padding:16px 30px; font-size:1rem; font-weight:600; border-radius:8px; border:none; background-image:var(--color-accent-gradient); background-size:200% auto; color:white; cursor:pointer; transition:all 0.3s ease; }
.signup-form button:hover { background-position:right center; transform:translateY(-2px); box-shadow:0 4px 15px rgba(0, 0, 0, 0.1); }
.widget-section { padding:60px 20px; max-width:900px; margin:40px auto; }
.section-title { text-align:center; font-size:2.5rem; margin-bottom:50px; font-weight:600; line-height: 1.3; }
.commitments-grid { display:grid; gap:20px; }
.commitment-item { display:flex; justify-content:space-between; align-items:center; background:#f8f9fa; padding:20px 25px; border-radius:12px; border:1px solid #e9ecef; }
.commitment-item h3 { margin:0; color:var(--color-text); }
.toggle-switch { position:relative; display:inline-block; width:50px; height:28px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:not-allowed; top:0; left:0; right:0; bottom:0; background-color:#ccc; transition:.4s; border-radius:28px; }
.slider:before { position:absolute; content:""; height:20px; width:20px; left:4px; bottom:4px; background-color:white; transition:.4s; border-radius:50%; }
input:checked + .slider { background-image:var(--color-accent-gradient); }
input:checked + .slider:before { transform:translateX(22px); }
.performance-widget.interactive { background:#f8f9fa; border:1px solid #e9ecef; border-radius:16px; padding:30px; box-shadow:0 4px 20px rgba(0,0,0,0.05); }
.os-comparison { margin-bottom:20px; }
.os-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.os-header h4 { margin: 0; font-weight: 500; color: #555; }
.task-counter { font-size: 0.9rem; color: #333; background: #e9ecef; padding: 2px 8px; border-radius: 6px;}
.bar-container { width:100%; height:30px; background-color:#e9ecef; border-radius:8px; overflow:hidden; display:flex; position:relative; }
.bar-segment { height:100%; }
.bar-segment.bloatware, .legend-color.bloatware { background-color:#ff8787; }
.bar-segment.background, .legend-color.background { background-color:#fcc419; }
.bar-segment.system, .legend-color.system { background-color:#748ffc; }
.bar-segment.system.kula { background-color:#a5d8ff; }
.progress-bar { position:absolute; left:0; top:0; height:100%; width:0%; background:rgba(22, 201, 139, 0.6); transition:width 1s ease-out; }
.bar-legend { display: flex; justify-content: flex-start; gap: 15px; margin-top: 10px; font-size: 0.8rem; color: #555; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }
.task-list { text-align:center; margin-top:30px; border-top: 1px solid #e9ecef; padding-top: 20px; }
.task-list p { margin: 0 0 15px 0; color: #555; }
.task-btn { background: #fff; border: 1px solid #ced4da; padding: 10px 15px; margin: 5px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.task-btn:hover { background-color: #e9ecef; transform: translateY(-2px); }
.task-btn:disabled { background: #a5d8ff; color: #fff; border-color: #a5d8ff; cursor: not-allowed; }
.task-btn.completed { background-image: var(--color-accent-gradient); color: white; border: none; }
.task-btn.completed::after { content: ' ✓'; }
.claims-section { padding-top: 60px; padding-bottom: 80px; }
.claims-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 60px; }
.claim-item { position: relative; }
.claim-number { font-size: 4rem; font-weight: 700; color: #e9ecef; position: absolute; top: -40px; left: -20px; z-index: -1; }
.claim-item p { font-size: 1.5rem; font-weight: 300; line-height: 1.4; margin: 0; }
@media (max-width:768px) {
    .hero-content h1 {font-size:2.5rem;}
    .signup-form {flex-direction:column; align-items:center;}
    .signup-form input {width:100%; max-width:300px;}
    .claims-grid { grid-template-columns: 1fr; }
    .claim-item p { font-size: 1.2rem; }
}