.hero-section{position:relative;overflow:hidden;min-height:650px;display:flex;align-items:center}.hero-bg{position:absolute;inset:0;background:linear-gradient(rgba(15,23,42,0.80),rgba(15,23,42,0.90)),url('/static/images/image-optimization-hero.webp');background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0}.hero-section .container-lg{position:relative;z-index:2}.hero-section h1{color:#fff;max-width:900px;margin-left:auto;margin-right:auto}.hero-section .hero-text{max-width:720px;color:rgba(255,255,255,0.85) !important}.hero-section .badge{backdrop-filter:blur(8px);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12)}.hero-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(37,99,235,0.20),transparent 40%);z-index:1;pointer-events:none}.hero-section .trust-badges .badge,.hero-section .hero-badge .badge{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#fff;backdrop-filter:blur(8px);transition:all .2s ease}.hero-section .trust-badges .badge:hover,.hero-section .hero-badge .badge:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.25);color:#fff;transform:translateY(-2px)}.hero-section .btn-outline{color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}.hero-section .btn-outline:hover{background:#fff;color:var(--primary);border-color:#fff}.hero-section .btn-outline:hover{color:var(--primary)}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:2rem;text-align:center;cursor:pointer;transition:all .25s ease;background:rgba(var(--text-rgb),0.02)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary);background:rgba(var(--primary-rgb),0.05)}.upload-icon{font-size:2.5rem;color:var(--primary);margin-bottom:.75rem}.preview-image{max-width:100%;max-height:300px;border-radius:var(--radius-md);object-fit:contain}.compression-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;text-align:center;transition:all .25s ease}.compression-stat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}.compression-stat .stat-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.compression-stat .stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--text)}.compression-stat .stat-unit{font-size:var(--text-sm);color:var(--text-muted)}.saved-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:var(--text-sm)}.saved-badge.success{background:rgba(var(--success-rgb),0.12);color:var(--success-color)}.format-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.35rem .75rem;border-radius:999px;font-size:var(--text-xs);background:rgba(var(--primary-rgb),0.08);color:var(--primary);border:1px solid rgba(var(--primary-rgb),0.2)}#resultBox{animation:fadeInUp .5s ease}@media(max-width:768px){.compression-stat .stat-value{font-size:var(--text-xl)}}