:root{--primary:#8b5cf6;--primary-hover:#7c3aed;--bg-color:#0f172a;--bg-card:#1e293bb3;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#ffffff1a}body{background-color:var(--bg-color);color:var(--text-main);background:radial-gradient(circle at 50% -20%,#2e1065,#0f172a 80%);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex}#root{width:100%;max-width:800px;padding:2rem}:root{--primary:#8b5cf6;--primary-hover:#7c3aed;--success:#10b981;--success-hover:#059669;--bg-color:#020617;--bg-card:#0f172a99;--bg-card-hover:#1e293bcc;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#ffffff14}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;overflow-x:hidden}.app-layout{flex-direction:column;min-height:100vh;display:flex}.navbar{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;background:#020617cc;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex}.logo{color:var(--text-main);align-items:center;gap:.5rem;font-size:1.25rem;font-weight:800;display:flex}.logo svg{width:24px;height:24px;color:var(--primary)}.nav-links{gap:1.5rem;display:flex}.nav-links a{color:var(--text-muted);font-size:.9rem;text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--text-main)}.security-banner{color:#34d399;text-align:center;background-color:#10b9811a;border-bottom:1px solid #10b98133;justify-content:center;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.85rem;font-weight:500;display:flex}.security-banner svg{flex-shrink:0;width:18px;height:18px}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem 4rem}.hero-section{text-align:center;padding:4rem 0 3rem}.hero-section h1{color:#fff;margin-bottom:1rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.2}.hero-section .subtitle{color:var(--text-muted);max-width:600px;margin:0 auto 3rem;font-size:1.15rem}.upload-container{max-width:680px;margin:0 auto}.dropzone{border:2px dashed var(--primary);background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;transition:all .3s;display:flex}.dropzone:hover,.dropzone.active{background:var(--bg-card-hover);border-color:#a78bfa;transform:translateY(-2px);box-shadow:0 10px 30px #8b5cf61a}.dropzone-icon{width:64px;height:64px;color:var(--primary);background:#8b5cf61a;border-radius:50%;justify-content:center;align-items:center;margin-bottom:.5rem;display:flex}.dropzone-icon svg{width:32px;height:32px}.dropzone h2{color:#fff;font-size:1.5rem;font-weight:700}.format-text{color:var(--text-muted);font-size:.9rem}.btn-select{border:1px solid var(--border-color);color:#fff;cursor:pointer;background:#ffffff0d;border-radius:8px;margin-top:1rem;padding:.75rem 1.5rem;font-weight:600;transition:all .2s}.btn-select:hover{background:#ffffff1a}.status-card{background:var(--bg-card);border:1px solid var(--border-color);text-align:center;border-radius:16px;padding:2.5rem;box-shadow:0 10px 30px #0003}.status-card h3{margin-bottom:1.5rem;font-size:1.25rem}.success-text{color:var(--success)!important}.progress-bar-bg{border:1px solid var(--border-color);background:#ffffff0d;border-radius:6px;width:100%;height:12px;margin-bottom:2rem;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary), #c084fc);height:100%;transition:width .3s}.progress-bar-fill.success-bg{background:linear-gradient(90deg, var(--success), #34d399)}.error-message{color:#f87171;background:#ef44441a;border:1px solid #ef444433;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;margin-bottom:1rem;padding:1rem;display:flex}.error-message svg{width:20px;height:20px}.download-actions{flex-direction:column;align-items:center;gap:1rem;display:flex}.btn-giant{background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:none;border-radius:12px;width:100%;max-width:400px;padding:1.25rem 2.5rem;font-size:1.25rem;font-weight:800;text-decoration:none;transition:all .3s;display:inline-block}.btn-giant.success{background:var(--success);box-shadow:0 4px 15px #10b9814d}.btn-giant.success:hover{background:var(--success-hover);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn-secondary{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:.9rem;text-decoration:underline}.btn-secondary:hover{color:#fff}.benefits-section{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:4rem 0;display:grid}.benefit-card{text-align:center;padding:1rem}.benefit-icon{width:48px;height:48px;color:var(--primary);margin:0 auto 1rem}.benefit-card h3{color:#fff;margin-bottom:.5rem;font-size:1.15rem}.benefit-card p{color:var(--text-muted);font-size:.95rem}.before-after-section{text-align:center;padding:5rem 0}.before-after-section h2{margin-bottom:3rem;font-size:2rem}.comparison-container{flex-direction:column;align-items:center;gap:2rem;max-width:900px;margin:0 auto;display:flex}@media (width>=768px){.comparison-container{flex-direction:row;justify-content:space-between}}.comparison-card{background:var(--bg-card);border:1px solid var(--border-color);text-align:left;border-radius:12px;flex:1;width:100%;padding:2rem;position:relative}.badge{text-transform:uppercase;border-radius:20px;padding:.25rem 1rem;font-size:.8rem;font-weight:700;position:absolute;top:-12px;left:20px}.badge.bad{color:#fff;background:#ef4444}.badge.good{background:var(--success);color:#fff}.comparison-card code{color:#f87171;background:#0000004d;border-radius:6px;margin-bottom:.5rem;padding:.5rem 1rem;font-family:monospace;font-size:.9rem;display:block}.after-content{text-align:center;height:100%;min-height:200px;color:var(--success);flex-direction:column;justify-content:center;align-items:center;display:flex}.after-content svg{width:64px;height:64px;margin-bottom:1rem}.after-content p{margin-bottom:.5rem;font-size:1.1rem;font-weight:600}.after-content .small-text{color:var(--text-muted);font-size:.9rem}.comparison-arrow{color:var(--text-muted);display:none}@media (width>=768px){.comparison-arrow{display:block}.comparison-arrow svg{width:32px;height:32px}}.info-section{border-top:1px solid var(--border-color);grid-template-columns:1fr;gap:4rem;padding:4rem 0;display:grid}@media (width>=768px){.info-section{grid-template-columns:1fr 1fr}}.info-block h2{margin-bottom:1.5rem;font-size:1.75rem}.info-block p{color:var(--text-muted);font-size:1.05rem;line-height:1.6}.steps-list{flex-direction:column;gap:1.5rem;list-style:none;display:flex}.steps-list li{color:var(--text-muted);align-items:flex-start;gap:1rem;display:flex}.steps-list strong{color:#fff}.step-num{width:28px;height:28px;color:var(--primary);background:#8b5cf633;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.faq-section{border-top:1px solid var(--border-color);padding:4rem 0}.faq-section h2{text-align:center;margin-bottom:3rem;font-size:2rem}.faq-grid{grid-template-columns:1fr;gap:2rem;display:grid}@media (width>=768px){.faq-grid{grid-template-columns:1fr 1fr}}.faq-item h4{color:#fff;margin-bottom:.5rem;font-size:1.1rem}.faq-item p{color:var(--text-muted);font-size:.95rem;line-height:1.6}.footer{border-top:1px solid var(--border-color);text-align:center;background:#000;margin-top:auto;padding:3rem 2rem}.footer-brand{color:#fff;margin-bottom:.5rem;font-size:1rem}.footer-brand a{color:var(--primary);text-decoration:none}.footer-brand a:hover{text-decoration:underline}.footer-slogan{color:var(--text-muted);font-size:.9rem}.logo-badge{background:linear-gradient(90deg, var(--primary), #a78bfa);color:#fff;letter-spacing:.5px;border-radius:4px;margin-left:.4rem;padding:.15rem .4rem;font-size:.7rem;font-weight:800}.nav-tabs-container{border:1px solid var(--border-color);background:#ffffff08;border-radius:30px;gap:.25rem;padding:.25rem;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:20px;align-items:center;gap:.4rem;padding:.5rem 1.25rem;font-size:.85rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.tab-btn:hover{color:#fff}.tab-btn.active{color:#fff;background:#8b5cf626;border:1px solid #8b5cf640;box-shadow:inset 0 0 10px #8b5cf633}@media (width<=768px){.nav-container{flex-direction:column;gap:1rem;padding:1rem}.desktop-only{display:none}}.platforms-row{flex-wrap:wrap;justify-content:center;gap:1rem;max-width:800px;margin:0 auto 3rem;display:flex}.platform-badge{border:1px solid var(--border-color);color:var(--text-muted);background:#ffffff05;border-radius:30px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex}.platform-badge svg{fill:currentColor;width:16px;height:16px}.platform-badge.active{color:#fff;transform:scale(1.08)translateY(-2px)}.platform-badge.active.tiktok{color:#00f2fe;background:#00f2ea14;border-color:#00f2fe;box-shadow:0 0 15px #00f2fe40}.platform-badge.active.instagram{color:#e1306c;background:#e1306c14;border-color:#e1306c;box-shadow:0 0 15px #e1306c40}.platform-badge.active.youtube{color:red;background:#ff000014;border-color:red;box-shadow:0 0 15px #ff000040}.platform-badge.active.facebook{color:#1877f2;background:#1877f214;border-color:#1877f2;box-shadow:0 0 15px #1877f240}.platform-badge.active.twitter{color:#fff;background:#ffffff14;border-color:#fff;box-shadow:0 0 15px #fff3}.platform-badge.active.reddit{color:#ff4500;background:#ff450014;border-color:#ff4500;box-shadow:0 0 15px #ff450040}.platform-badge.active.pinterest{color:#bd081c;background:#bd081c14;border-color:#bd081c;box-shadow:0 0 15px #bd081c40}.downloader-form{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;flex-direction:column;gap:1.5rem;padding:2.5rem;display:flex;box-shadow:0 10px 30px #00000026}.mode-selectors{justify-content:center;gap:1rem;margin-bottom:.5rem;display:flex}.mode-btn{border:1px solid var(--border-color);max-width:200px;color:var(--text-muted);cursor:pointer;background:#ffffff05;border-radius:8px;flex:1;padding:.6rem 1rem;font-size:.85rem;font-weight:600;transition:all .3s}.mode-btn:hover{color:#fff;background:#ffffff0d}.mode-btn.active{border-color:var(--primary);color:#fff;background:#8b5cf61f;box-shadow:0 0 10px #8b5cf626}.url-input-wrapper{width:100%;display:flex;position:relative}.url-input{border:1px solid var(--border-color);color:#fff;background:#0000004d;border-radius:12px;outline:none;width:100%;padding:1.25rem 7.5rem 1.25rem 1.25rem;font-size:1rem;transition:all .3s}.url-input:focus{border-color:var(--primary);box-shadow:0 0 15px #8b5cf633}.btn-fetch{background:linear-gradient(135deg, var(--primary), #a78bfa);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:0 1.5rem;font-weight:700;transition:all .3s;display:flex;position:absolute;top:6px;bottom:6px;right:6px}.btn-fetch svg{width:16px;height:16px;transition:transform .2s}.btn-fetch:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px #8b5cf640}.btn-fetch:hover:not(:disabled) svg{transform:translate(2px)}.btn-fetch:disabled{opacity:.5;cursor:not-allowed;background:#ffffff0d}.downloader-dropzone-mock{text-align:center;color:var(--text-muted);background:#0000001a;border:1px dashed #ffffff14;border-radius:10px;padding:1.5rem;font-size:.85rem}.downloading-card{padding:4rem 2rem!important}.scanner-container{background:#8b5cf60d;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;width:120px;height:120px;margin:0 auto 2rem;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #8b5cf61a}.scanner-line{background:#a78bfa;width:100%;height:2px;animation:2s ease-in-out infinite scan;position:absolute;box-shadow:0 0 8px #a78bfa}@keyframes scan{0%{top:0%}50%{top:100%}to{top:0%}}.platform-processing-logo{letter-spacing:1px;color:var(--primary);text-shadow:0 0 10px #8b5cf64d;font-size:.9rem;font-weight:800}.pulse-text{animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.loading-subtext{color:var(--text-muted);margin-top:.5rem;font-size:.85rem}.success-card{padding:3rem 2rem!important}.success-icon-wrapper{border:2px solid var(--success);background:#10b9811a;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 1.5rem;display:flex;box-shadow:0 0 15px #10b98133}.success-check{width:28px;height:28px;color:var(--success)}.success-subtext{color:var(--text-muted);max-width:320px;margin:.5rem auto 2rem;font-size:.95rem}.video-details-mini{border:1px solid var(--border-color);text-align:left;background:#0003;border-radius:8px;justify-content:space-between;gap:1rem;max-width:400px;margin:0 auto 2rem;padding:.85rem 1.25rem;font-size:.9rem;display:flex}.video-details-mini strong{color:var(--text-muted);flex-shrink:0}.video-details-mini span{color:#fff;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tab-transition-wrapper{animation:.4s cubic-bezier(.16,1,.3,1) slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}