html{scroll-behavior:smooth}#compression-options,#action{scroll-margin-top:1.5rem}.home-hero-heading{text-align:center;max-width:40rem;margin-left:auto;margin-right:auto;padding:1.5rem 1.5rem .5rem}.home-hero-heading h1{color:#1e293b;margin-bottom:.5rem;font-size:clamp(1.5rem,4vw,2rem);line-height:1.25}.home-hero-heading p{color:#64748b;margin:0;font-size:1rem;line-height:1.6}[data-theme=dark] .home-hero-heading h1{color:#f1f5f9}[data-theme=dark] .home-hero-heading p{color:#94a3b8}.hero{text-align:center;padding:1rem 1.5rem}.hero-grid{flex-direction:column;gap:1.5rem;max-width:500px;margin:2rem auto;display:flex}.hero-grid.has-file{max-width:700px}.tagline{color:#64748b;margin-top:1.5rem;font-size:1.1rem;font-style:normal;font-weight:500}.action{flex-direction:column;justify-content:center;gap:.75rem;display:flex}.action .preview-image{object-fit:contain;border-radius:.75rem;width:100%;max-height:150px;box-shadow:0 4px 6px -1px #0000001a}.action .size-info{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:2px solid #e2e8f0;border-radius:.75rem;padding:.75rem;box-shadow:0 2px 4px #0000000d}.action .size-info p{color:#475569;margin:.5rem 0;font-size:.9rem}.action .size-info strong{color:#1e293b;font-weight:600}@media (max-width:640px){.home-hero-heading{padding:1.5rem 1rem .5rem}.hero{padding:1rem}}.action button{border-radius:.75rem;width:100%;height:fit-content;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;transition:all .3s;box-shadow:0 4px 6px -1px #3b82f64d}.action button.secondary{color:#475569;background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);box-shadow:0 4px 6px -1px #0000001a}.action button.secondary:hover{background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 100%);transform:translateY(-2px);box-shadow:0 10px 15px -3px #00000026}.action button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 15px -3px #3b82f666}.action button:disabled{opacity:.5;cursor:not-allowed}[data-theme=dark] .tagline{color:#94a3b8}[data-theme=dark] .action .size-info{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#334155}[data-theme=dark] .action .size-info p{color:#cbd5e1}[data-theme=dark] .action .size-info strong{color:#f1f5f9}[data-theme=dark] .action button.secondary{color:#cbd5e1;background:linear-gradient(135deg,#334155 0%,#1e293b 100%);box-shadow:0 4px 6px -1px #0003}[data-theme=dark] .action button.secondary:hover{background:linear-gradient(135deg,#475569 0%,#334155 100%);box-shadow:0 10px 15px -3px #0000004d}@media (max-width:768px){.hero-grid,.hero-grid.has-file{max-width:100%}}