:root{--primary-color:#1C69FE;--dark-bg:#1e293b;--dark-text:#f1f5f9;--light-bg:#f8fafc;--light-text:#334155;--success-color:#10b981;--warning-color:#f59e0b;--danger-color:#ef4444;--border-radius:12px;--box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--tw-bg-opacity:.1}body{background-color:var(--light-bg);color:var(--light-text);transition:all 0.3s ease}body.dark{background-color:var(--dark-bg);color:var(--dark-text)}.section{padding:40px 0}.section-title{text-align:center;margin-bottom:30px}.section-title h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:12px;color:var(--primary-color)}.section-title p{font-size:clamp(1rem,2vw,1.1rem);max-width:700px;margin:0 auto;opacity:.9;line-height:1.5}.comparison-wrapper{margin-bottom:30px}.comparison-container-desktop{display:grid;grid-template-columns:16% repeat(3,1fr);min-width:800px;background-color:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--box-shadow)}body.dark .comparison-container-desktop{background-color:#334155}.comparison-header{display:contents}.comparison-feature{padding:16px;font-weight:600;background-color:#1c69fe;color:#fff;position:sticky;left:0;z-index:2}body.dark .comparison-feature{background-color:#1e293b}.comparison-protocol{padding:16px;text-align:center;font-weight:600;background-color:var(--primary-color);color:white}.comparison-row{display:contents}.feature-name{padding:16px;font-weight:500;background-color:#262e26;position:sticky;color:#fff;left:0;z-index:1}body.dark .feature-name{background-color:#334155}.feature-value{padding:16px;text-align:center;display:flex;gap:10px;align-items:center;justify-content:center;background-color:white;border-bottom:1px solid #e2e8f0}body.dark .feature-value{background-color:#334155;border-bottom-color:#475569}.comparison-container-mobile{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.comparison-card{background-color:white;border-radius:var(--border-radius);box-shadow:var(--box-shadow);overflow:hidden;transition:transform 0.3s ease;display:flex;flex-direction:column}body.dark .comparison-card{background-color:#334155}.comparison-card:hover{transform:translateY(-5px)}.comparison-header-mobile{background-color:var(--primary-color);color:white;padding:16px;text-align:center;font-weight:600;font-size:clamp(1.2rem,2vw,1.4rem)}.comparison-body{padding:16px;flex-grow:1}.feature-row-mobile{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e2e8f0}body.dark .feature-row-mobile{border-bottom-color:#475569}.feature-row-mobile:last-child{border-bottom:none}.feature-name-mobile{font-weight:500;font-size:clamp(.9rem,2vw,1rem);flex:1}.feature-value-mobile{display:flex;align-items:center;flex:1;gap:20px;font-size:clamp(.9rem,2vw,1rem);justify-content:center}.choose-button{margin:16px;padding:10px;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all 0.3s ease;font-size:clamp(.9rem,2vw,1rem);background-color:var(--primary-color);color:white;text-align:center}.choose-button:hover{background-color:#1557d8}.stars{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.star{color:var(--warning-color);font-size:clamp(.9rem,2vw,1rem)}.recommendation-box{background-color:white;border-radius:var(--border-radius);padding:25px;box-shadow:var(--box-shadow);margin-top:30px}body.dark .recommendation-box{background-color:#334155}.recommendation-title{font-size:clamp(1.4rem,3vw,1.8rem);margin-bottom:15px;color:var(--primary-color)}.recommendation-desc{font-size:clamp(.95rem,2vw,1.1rem);margin-bottom:25px;opacity:.9;line-height:1.5}.recommendation-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.recommendation-card{display:flex;background-color:#f1f5f9;border-radius:var(--border-radius);padding:20px;transition:transform 0.3sease;flex-direction:column;justify-content:space-between}body.dark .recommendation-card{background-color:#1e293b}.recommendation-card:hover{transform:translateY(-5px)}.card-header{display:flex;align-items:center;margin-bottom:12px}.card-icon{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:12px;font-size:1.1rem}.speed-icon{background-color:rgba(38,166,154,.1);color:rgb(38,166,154)}.security-icon{background-color:rgba(49,204,236,.1);color:rgb(49,204,236)}.unblock-icon{background-color:rgba(28,105,255,.1);color:rgb(28,105,255)}.card-title{font-size:clamp(1.1rem,2vw,1.2rem);font-weight:600}.card-desc{margin-bottom:15px;opacity:.8;font-size:clamp(.9rem,2vw,1rem);line-height:1.5}.card-button{display:block;width:100%;padding:10px;border-radius:8px;border:none;text-align:center;font-weight:600;cursor:pointer;transition:all 0.3s ease;font-size:clamp(.9rem,2vw,1rem)}.speed-button{background-color:rgb(38 166 154 / var(--tw-bg-opacity));color:rgb(38,166,154)}.speed-button:hover{background-color:rgb(38 166 154 / .2)}.security-button{background-color:rgb(49 204 236 / var(--tw-bg-opacity));color:rgb(49,204,236)}.security-button:hover{background-color:rgb(49 204 236 / .2)}.unblock-button{background-color:rgb(28 105 255 / var(--tw-bg-opacity));color:rgb(28,105,255)}.unblock-button:hover{background-color:rgb(28 105 255 / .2)}.protocol-info{margin:40px 0}.ml-auto{margin-left:auto}.protocol-card{background-color:white;border-radius:var(--border-radius);box-shadow:var(--box-shadow);overflow:hidden;margin-bottom:20px}body.dark .protocol-card{background-color:#334155}.protocol-header{display:flex;align-items:center;padding:20px;background-color:#f1f5f9;cursor:pointer}body.dark .protocol-header{background-color:#1e293b}.protocol-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:15px;font-size:1.3rem;color:white}.wireguard-icon{background-color:#881337}.openvpn-icon{background-color:#1e40af}.sstp-icon{background-color:#4338ca}.vless-icon{background-color:#7c3aed}.protocol-name{font-size:1.3rem;font-weight:600;color:var(--primary-color)}.protocol-content{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}.protocol-content.active{padding:20px;max-height:1000px}.info-block{margin-bottom:20px}.info-title{font-size:1.1rem;font-weight:600;margin-bottom:10px;color:var(--primary-color)}.info-text{line-height:1.6;opacity:.9}@media (max-width:767px){.section{padding:30px 0}.comparison-feature,.feature-name{min-width:150px}.feature-value{min-width:150px;padding:12px;font-size:.9rem}.recommendation-box{padding:20px}.recommendation-cards{grid-template-columns:1fr}.protocol-header{padding:15px}.protocol-icon{width:40px;height:40px;font-size:1.1rem}.protocol-name{font-size:1.1rem}}@media (max-width:480px){.container{padding:0 15px}.section-title h2{font-size:1.6rem}.card-header{flex-direction:column;align-items:flex-start}.card-icon{margin-bottom:10px;margin-right:0}.protocol-content{padding:0 15px}.protocol-content.active{padding:15px}}@media (min-width:768px){.comparison-container-mobile{display:none}.comparison-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767px){.comparison-container-desktop{display:none}.section{padding:30px 0}.feature-row-mobile{padding:10px 0}.feature-name-mobile,.feature-value-mobile{font-size:.9rem}.recommendation-box{padding:20px}.recommendation-cards{grid-template-columns:1fr}}@media (max-width:480px){.container{padding:0 15px}.section-title h2{font-size:1.6rem}.card-header{flex-direction:column;align-items:flex-start}.card-icon{margin-bottom:10px;margin-right:0}}