.btn,.upload-area{transition:.3s;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e1e2e 0,#2a2a3e 100%);color:#fff;min-height:100vh;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.compressor-section,.hero{border-radius:20px;margin:2rem 0}header{background:rgba(42,42,62,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:1000}.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.btn,.logo{text-decoration:none;align-items:center}.logo{font-size:1.8rem;font-weight:700;color:#00d4ff;display:flex;gap:.5rem}.hero{text-align:center;padding:4rem 0;background:linear-gradient(135deg,rgba(0,212,255,.1) 0,rgba(138,43,226,.1) 100%)}.hero h1{font-size:3rem;margin-bottom:1rem;background:linear-gradient(45deg,#00d4ff,#8a2be2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.2rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.compressor-section{background:rgba(42,42,62,.6);padding:3rem;border:1px solid rgba(255,255,255,.1)}.upload-area{border:2px dashed rgba(0,212,255,.5);border-radius:15px;padding:3rem;text-align:center;margin-bottom:2rem}.upload-area:hover{border-color:#00d4ff;background:rgba(0,212,255,.05)}.upload-area.dragover{border-color:#00d4ff;background:rgba(0,212,255,.1)}.feature-icon,.upload-icon{font-size:3rem;color:#00d4ff;margin-bottom:1rem}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.control-group{background:rgba(30,30,46,.7);padding:1.5rem;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.control-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#00d4ff}.control-group input,.control-group select{width:100%;padding:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(30,30,46,.8);color:#fff;font-size:1rem}.control-group input:focus,.control-group select:focus{outline:0;border-color:#00d4ff;box-shadow:0 0 0 2px rgba(0,212,255,.2)}.range-container{position:relative;margin-top:.5rem}.range-value{position:absolute;top:-30px;right:0;background:#00d4ff;color:#1e1e2e;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:700}.btn,.file-name{font-weight:600}.btn{padding:1rem 2rem;border:none;border-radius:10px;font-size:1rem;display:inline-flex;gap:.5rem}.btn-primary{background:linear-gradient(45deg,#00d4ff,#8a2be2);color:#fff}.btn-secondary,.progress-bar{background:rgba(255,255,255,.1)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,212,255,.3)}.btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:rgba(255,255,255,.2)}.btn:disabled{opacity:.5;cursor:not-allowed}.progress-bar{width:100%;height:8px;border-radius:4px;overflow:hidden;margin:1rem 0;display:none}.progress-fill,.progress-mini:after{height:100%;background:linear-gradient(45deg,#00d4ff,#8a2be2)}.progress-fill{transition:width .3s;width:0%}.file-list{margin-top:2rem}.file-item{background:rgba(30,30,46,.7);padding:1rem;margin-bottom:1rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:1rem}.feature-card,.loading{padding:2rem;text-align:center}.file-info{flex:1}.file-name{margin-bottom:.5rem}.file-size{font-size:.9rem;opacity:.7}.file-actions{display:flex;gap:.5rem}.faq-section,.features{margin:4rem 0}.detailed-features h2,.faq-section h2,.features h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#00d4ff}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-card{background:rgba(42,42,62,.6);border-radius:15px;border:1px solid rgba(255,255,255,.1);transition:transform .3s}.feature-card:hover{transform:translateY(-5px)}.feature-card h3{margin-bottom:1rem;font-size:1.5rem}footer{background:rgba(30,30,46,.8);padding:2rem 0;text-align:center;border-top:1px solid rgba(255,255,255,.1);margin-top:4rem}.loading{display:none}.spinner{border:4px solid rgba(255,255,255,.1);border-top:4px solid #00d4ff;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.detailed-features{margin:4rem 0;background:rgba(30,30,46,.4);padding:4rem 0;border-radius:20px}.detailed-feature{margin:4rem 0;padding:2rem 0}.feature-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.demo-item,.feature-text h3{align-items:center;margin-bottom:1rem;display:flex}.feature-content.reverse{direction:rtl}.feature-content.reverse .feature-text{direction:ltr}.feature-text h3{font-size:1.8rem;color:#00d4ff;gap:.5rem}.feature-text p{font-size:1.1rem;margin-bottom:1.5rem;opacity:.9;line-height:1.7}.control-item label,.demo-image i{display:block;margin-bottom:.5rem}.feature-text ul{list-style:none;padding:0}.feature-text li{padding:.5rem 0 .5rem 1.5rem;position:relative;opacity:.8}.feature-text li:before{content:"✓";position:absolute;left:0;color:#00d4ff;font-weight:700}.feature-image{display:flex;justify-content:center;align-items:center}.comparison-demo{background:rgba(42,42,62,.8);padding:2rem;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.demo-item{gap:1.5rem}.demo-image{background:rgba(30,30,46,.8);padding:1.5rem;border-radius:10px;text-align:center;border:1px solid rgba(255,255,255,.1)}.demo-image i{font-size:2rem}.demo-image.original i{color:#ff6b6b}.batch-result,.demo-image.compressed i,.file-item-demo i,.savings,.slider-demo span{color:#00d4ff}.demo-item i.fa-arrow-right{color:#8a2be2;font-size:1.5rem}.savings{text-align:center;font-size:1.2rem;font-weight:700;background:rgba(0,212,255,.1);padding:.5rem 1rem;border-radius:20px;border:1px solid rgba(0,212,255,.3)}.batch-demo{background:rgba(42,42,62,.8);padding:2rem;border-radius:15px;border:1px solid rgba(255,255,255,.1);width:100%;max-width:350px}.upload-preview{margin-bottom:1.5rem}.file-item-demo{display:flex;align-items:center;gap:1rem;padding:.8rem;margin-bottom:.8rem;background:rgba(30,30,46,.8);border-radius:8px;border:1px solid rgba(255,255,255,.1)}.file-item-demo span{flex:1;font-size:.9rem}.progress-mini{width:40px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}.progress-mini:after{content:'';display:block;width:70%;animation:2s infinite progress-anim}@keyframes progress-anim{0%{width:0%}100%{width:100%}}.batch-result{text-align:center;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem}.batch-result i{font-size:1.5rem}.controls-demo{background:rgba(42,42,62,.8);padding:2rem;border-radius:15px;border:1px solid rgba(255,255,255,.1);width:100%;max-width:300px}.control-panel{display:flex;flex-direction:column;gap:1.5rem}.control-item label{font-weight:600;color:#00d4ff;font-size:.9rem}.slider-demo{display:flex;align-items:center;gap:1rem}.slider-track{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;position:relative}.slider-thumb{position:absolute;top:-4px;width:14px;height:14px;background:#00d4ff;border-radius:50%;box-shadow:0 2px 8px rgba(0,212,255,.4)}.slider-demo span{font-size:.9rem;font-weight:700}.input-demo,.select-demo{padding:.6rem;background:rgba(30,30,46,.8);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.9rem}.faq-container{max-width:800px;margin:0 auto}.faq-item{background:rgba(42,42,62,.6);margin-bottom:1rem;border-radius:15px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.faq-question{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:.3s}.faq-question:hover{background:rgba(0,212,255,.05)}.faq-question h3{font-size:1.2rem;margin:0;color:#fff}.faq-question i{color:#00d4ff;transition:transform .3s}.faq-item.active .faq-question i{transform:rotate(45deg)}.faq-answer{padding:0 1.5rem;max-height:0;overflow:hidden;transition:.3s}.faq-item.active .faq-answer{max-height:200px;padding:0 1.5rem 1.5rem}.faq-answer p{margin:0;opacity:.9;line-height:1.6}@media (max-width:768px){.feature-content{grid-template-columns:1fr;gap:2rem}.feature-content.reverse{direction:ltr}.detailed-features{padding:2rem 0}.detailed-features h2{font-size:2rem}.feature-text h3{font-size:1.5rem}.demo-item{flex-direction:column;gap:1rem}.demo-item i.fa-arrow-right{transform:rotate(90deg)}}