:root{--p600: #2563eb;--p700: #1d4ed8;--p800: #1e40af;--a500: #8b5cf6;--a600: #7c3aed;--border: rgba(37,99,235,.1);--shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(37,99,235,.09);--radius-card: 22px;--glass-bg: rgba(255,255,255,.75);--glass-border: rgba(255,255,255,.2);--font-family: "Space Grotesk", sans-serif}*{box-sizing:border-box}.bg-orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;animation:orbFloat 20s ease-in-out infinite}.bg-orb-1{width:600px;height:600px;background:#2563eb14;top:-200px;right:-200px;animation-delay:0s}.bg-orb-2{width:500px;height:500px;background:#8b5cf60f;bottom:-150px;left:-150px;animation-delay:-5s}.bg-orb-3{width:400px;height:400px;background:#ec48990a;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.tool-hero{position:relative;padding:60px 0 40px;overflow:hidden;z-index:1}.tool-hero-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);pointer-events:none}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #2563eb00}50%{box-shadow:0 0 40px 8px #2563eb1a}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes floatSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes ripple{to{transform:scale(4);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}@keyframes successPop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes glowPulse{0%,to{opacity:.6}50%{opacity:1}}.animate-slide-down{animation:slideDown .7s cubic-bezier(.16,1,.3,1) forwards}.animate-slide-up{animation:slideUp .8s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-in{animation:scaleIn .6s cubic-bezier(.16,1,.3,1) forwards}.tool-card-shell{position:relative;background:#ffffffd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 1px 2px #0f172a0a,0 8px 24px -12px #2563eb1f,0 20px 48px -12px #0000000f;transition:all .4s cubic-bezier(.16,1,.3,1)}.tool-card-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-card);padding:1px;background:linear-gradient(135deg,#fffc,#2563eb0d,#fffc);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.tool-card-shell:hover{box-shadow:0 1px 2px #0f172a0a,0 12px 40px -16px #2563eb33,0 30px 60px -16px #00000014;transform:translateY(-2px)}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;background:#ffffffb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(37,99,235,.15);border-radius:999px;font-size:.75rem;font-weight:600;color:#2563eb;box-shadow:0 4px 12px -4px #2563eb14}.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:#2563eb;position:relative}.hero-badge-dot:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:#2563eb33;animation:glowPulse 2s ease-in-out infinite}.upload-zone{position:relative;border:2px dashed rgba(37,99,235,.15);border-radius:20px;padding:60px 40px;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);background:linear-gradient(160deg,#f8fafc99,#eff6ff4d);cursor:pointer;overflow:hidden;isolation:isolate}.upload-zone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle 400px at var(--mouse-x,50%) var(--mouse-y,50%),rgba(37,99,235,.06),transparent 70%);opacity:0;transition:opacity .5s;z-index:0}.upload-zone:hover:before{opacity:1}.upload-zone:hover{border-color:#2563eb66;background:linear-gradient(160deg,#ffffffe6,#eff6ff99);box-shadow:0 0 0 8px #2563eb0a,0 8px 32px -8px #2563eb1a;transform:translateY(-3px)}.upload-zone.drag-over{border-color:#2563eb;border-style:solid;background:linear-gradient(160deg,#eff6ff,#dbeafe);transform:scale(1.02);animation:pulseGlow 2s ease-in-out infinite}.upload-zone.has-file{border-style:solid;border-color:#22c55e4d;background:linear-gradient(160deg,#f0fdf499,#dcfce74d)}.upload-zone>*{position:relative;z-index:1}.upload-zone input[type=file]{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:20!important}.upload-icon-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}.upload-icon-circle{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#2563eb14,#8b5cf60d);border:1.5px solid rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .5s cubic-bezier(.34,1.56,.64,1)}.upload-zone:hover .upload-icon-circle{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:transparent;transform:scale(1.08) rotate(-3deg);box-shadow:0 12px 32px -8px #2563eb66}.upload-zone:hover .upload-icon-circle i{color:#fff!important}.upload-icon-circle i{font-size:2rem;color:#2563eb;transition:all .3s ease}.upload-text{text-align:center}.upload-text p:first-child{font-size:1.15rem;font-weight:700;color:#0f172a;margin:0 0 4px;letter-spacing:-.01em}.upload-text p:last-child{font-size:.85rem;color:#64748b;margin:0}.upload-chips{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}.upload-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:#ffffffb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #e2e8f0;border-radius:999px;font-size:.75rem;font-weight:600;color:#475569;box-shadow:0 1px 3px #00000008}.upload-chip i{font-size:.8rem}.file-preview-card{display:inline-flex;align-items:center;gap:14px;padding:16px 24px;background:#22c55e0f;border:1.5px solid rgba(34,197,94,.2);border-radius:16px;font-size:.95rem;font-weight:600;color:#16a34a;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 12px -4px #22c55e14}.remove-btn{width:30px;height:30px;border-radius:50%;background:#dc262614;border:1px solid rgba(220,38,38,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#dc2626;font-size:.75rem;transition:all .25s;flex-shrink:0}.remove-btn:hover{background:#dc2626;color:#fff;border-color:#dc2626;transform:rotate(90deg) scale(1.1);box-shadow:0 4px 12px -4px #dc26264d}.usage-strip{display:flex;align-items:center;gap:18px;background:#f8fafc99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(37,99,235,.06);border-radius:16px;padding:16px 20px;transition:all .3s ease}.usage-strip:hover{background:#f8fafccc;border-color:#2563eb1a}.usage-strip-icon{width:38px;height:38px;border-radius:12px;background:#eff6ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0}.usage-strip-label{font-size:.85rem;font-weight:600;color:#334155;flex:1;line-height:1.3}.usage-strip-label span{display:block;font-size:.75rem;font-weight:500;color:#94a3b8}.usage-strip-bar{flex:1;height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden;position:relative}.usage-strip-fill{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.16,1,.3,1);position:relative}.usage-strip-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s ease-in-out infinite;background-size:200% 100%}.usage-strip-count{font-size:1rem;font-weight:800;color:#2563eb;flex-shrink:0;white-space:nowrap}.btn-convert{width:100%;position:relative;overflow:hidden;background:linear-gradient(135deg,#2563eb,#1d4ed8,#7c3aed);background-size:300% 300%;animation:gradientShift 4s ease infinite;border:none;border-radius:16px;color:#fff;font-size:1rem;font-weight:600;font-family:Inter,sans-serif;padding:14px 28px;cursor:pointer;z-index:1;box-shadow:0 8px 28px -6px #2563eb73;transition:all .35s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.02em}.btn-convert:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .3s ease;pointer-events:none}.btn-convert:hover:before{opacity:1}.btn-convert:hover{transform:translateY(-3px);box-shadow:0 12px 40px -8px #2563eb8c}.btn-convert:active{transform:translateY(0) scale(.97)}.btn-convert:disabled{opacity:.5;cursor:not-allowed;transform:none;animation:none;box-shadow:none}.ripple-effect{position:absolute;border-radius:50%;background:#ffffff4d;transform:scale(0);animation:ripple .7s linear forwards;pointer-events:none}.success-header{display:flex;align-items:center;gap:18px;padding:24px 28px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid rgba(34,197,94,.2);border-radius:20px;margin-bottom:24px;animation:slideDown .6s cubic-bezier(.16,1,.3,1)}.success-icon-wrap{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 24px -6px #22c55e66;animation:successPop .6s cubic-bezier(.34,1.56,.64,1) .1s both}.success-icon-wrap i{font-size:1.6rem;color:#fff}.success-meta{flex:1}.success-meta h2{font-size:1.2rem;font-weight:800;color:#15803d;margin:0 0 2px;letter-spacing:-.01em}.success-meta p{font-size:.85rem;color:#16a34a;margin:0;font-weight:500}.success-page-count{font-size:2.2rem;font-weight:900;color:#22c55e;line-height:1;text-align:center}.success-page-count small{display:block;font-size:.7rem;font-weight:600;color:#86efac;text-transform:uppercase;letter-spacing:.05em}.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-bottom:24px}.img-card{background:#fff;border:1.5px solid #e8edf5;border-radius:18px;overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1);animation:scaleIn .4s cubic-bezier(.16,1,.3,1) both;box-shadow:0 2px 8px #00000008}.img-card:hover{border-color:#2563eb40;box-shadow:0 12px 32px -12px #2563eb26;transform:translateY(-4px)}.img-card-header{padding:8px 12px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}.img-card-header span{font-size:.75rem;font-weight:700;color:#64748b}.img-card-header i{font-size:.7rem;color:#cbd5e1}.img-card-thumb{width:100%;aspect-ratio:3/4;object-fit:contain;background:#fafbfc;padding:8px;display:block;transition:transform .3s ease}.img-card:hover .img-card-thumb{transform:scale(1.02)}.img-card-footer{padding:12px}.btn-dl{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 0;border:none;border-radius:10px;cursor:pointer;font-size:.8rem;font-weight:700;font-family:Inter,sans-serif;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease;box-shadow:0 4px 12px -4px #2563eb59}.btn-dl:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px #2563eb73}.btn-dl:active{transform:scale(.97)}.result-actions{display:flex;gap:14px;justify-content:center!important}.btn-zip{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:none;border-radius:16px;cursor:pointer;font-size:.95rem;font-weight:700;font-family:Inter,sans-serif;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px -6px #7c3aed66}.btn-zip:hover{transform:translateY(-3px);box-shadow:0 12px 32px -8px #7c3aed80}.btn-again{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:1.5px solid rgba(37,99,235,.15);border-radius:16px;cursor:pointer;font-size:.95rem;font-weight:700;font-family:Inter,sans-serif;background:#eff6ff99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#2563eb;transition:all .25s ease;white-space:nowrap}.btn-again:hover{background:#eff6ff;border-color:#2563eb4d;transform:translateY(-2px);box-shadow:0 4px 16px -6px #2563eb14}.btn-see-all{display:inline-flex;align-items:center;gap:10px;background:#f0f9ff;border:1px solid #bae6fd;color:#0369a1;font-size:.95rem;font-weight:700;padding:15px 24px;border-radius:16px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .15s}.btn-see-all:hover{background:#e0f2fe;transform:translateY(-1px)}.sticky-action-bar{position:sticky;top:20px;z-index:40;margin-bottom:24px;transition:all .3s ease}.sticky-action-bar .result-actions{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:16px 20px;box-shadow:0 8px 32px -12px #00000026;border:1px solid rgba(255,255,255,.3)}.sticky-action-bar.compact .result-actions{padding:12px 20px}.sticky-action-bar.compact .btn-zip,.sticky-action-bar.compact .btn-again{padding:10px 20px;font-size:.85rem}.fab-zip{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:28px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border:none;box-shadow:0 8px 24px -6px #7c3aed80;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:45;transition:all .3s cubic-bezier(.16,1,.3,1)}.fab-zip:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 32px -8px #7c3aed99}.fab-zip i{font-size:1.4rem;color:#fff}.back-to-top{position:fixed;bottom:24px;left:24px;width:44px;height:44px;border-radius:22px;background:#2563ebe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:45;transition:all .3s ease;opacity:0;transform:translateY(10px)}.back-to-top.show{display:flex;opacity:1;transform:translateY(0)}.back-to-top:hover{background:#2563eb;transform:translateY(-2px)}.back-to-top i{font-size:1rem;color:#fff}.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed,#2563eb);z-index:100;transition:width .1s ease;box-shadow:0 0 10px #2563eb80}.quick-stats{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f8fafc99;border-radius:14px;margin-bottom:16px;font-size:.8rem;border:1px solid rgba(37,99,235,.06)}.quick-stats .stat{display:flex;align-items:center;gap:8px;color:#475569}.quick-stats .stat i{color:#2563eb;font-size:.85rem}@media (max-width: 768px){.fab-zip{display:flex}.sticky-action-bar .result-actions{display:none}.back-to-top{bottom:100px}}.features-section{padding:30px 0 50px;z-index:1;position:relative}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;padding:28px 24px;border:1px solid rgba(255,255,255,.3);transition:all .4s cubic-bezier(.16,1,.3,1);text-align:center;box-shadow:0 2px 8px #00000005;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.5),transparent);opacity:0;transition:opacity .4s ease}.feature-card:hover:before{opacity:1}.feature-card:hover{transform:translateY(-6px);border-color:#2563eb26;box-shadow:0 16px 40px -12px #2563eb1f;background:#fffc}.feature-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:all .3s ease}.feature-card:hover .feature-icon{transform:scale(1.05)}.feature-card h3{font-size:1rem;font-weight:700;color:#0f172a;margin:0 0 6px;letter-spacing:-.01em}.feature-card p{font-size:.85rem;color:#64748b;margin:0;line-height:1.6}#toast{position:fixed;bottom:30px;right:30px;z-index:9999;display:flex;align-items:center;gap:12px;padding:14px 22px;background:#1e293bf2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;border-radius:16px;font-size:.9rem;font-weight:600;box-shadow:0 20px 48px -12px #0f172a80;pointer-events:none;opacity:0;border:1px solid rgba(255,255,255,.05)}#toast.show{animation:toastIn .5s cubic-bezier(.34,1.56,.64,1) forwards;opacity:1}#toast.hide{animation:toastOut .3s ease forwards}#toast i{color:#22c55e;font-size:1.1rem}.modal-overlay{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#0000004d;animation:fadeIn .3s ease}.modal-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:24px;box-shadow:0 32px 80px -20px #0f172a4d;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1)}@media (max-width: 768px){.upload-zone{padding:40px 24px}.tool-hero{padding:40px 0 24px}.img-grid{grid-template-columns:repeat(2,1fr)}.result-actions{flex-direction:column}.features-grid{grid-template-columns:1fr;gap:16px}#toast{bottom:16px;right:16px;left:16px}.success-header{flex-wrap:wrap;gap:12px;padding:20px}.success-page-count{flex:1;text-align:left}.usage-strip{flex-wrap:wrap;gap:10px}.usage-strip-label,.usage-strip-bar{width:100%}}@media (max-width: 480px){.upload-icon-row{flex-direction:column;gap:12px}.upload-text{text-align:center}.upload-chips{flex-direction:column;align-items:center}.img-grid{grid-template-columns:repeat(2,1fr);gap:10px}.tool-card-shell{padding:16px}}