.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:2.5rem 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);transform:translateY(-2px)}.upload-icon{font-size:3rem;color:var(--primary);margin-bottom:1rem}.preview-image{max-width:100%;max-height:320px;border-radius:var(--radius-lg);object-fit:contain;border:1px solid var(--border)}.preview-wrapper{position:relative;display:inline-block}.format-label{position:absolute;top:10px;right:10px;padding:.25rem .65rem;border-radius:999px;font-size:var(--text-xs);font-weight:600;background:rgba(var(--primary-rgb),0.9);color:#fff !important}.conversion-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem 1rem;text-align:center;transition:all .25s ease}.conversion-stat:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.1);border-color:rgba(var(--primary-rgb),0.3)}.conversion-stat .stat-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;font-weight:600}.conversion-stat .stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--text);line-height:1.2}.conversion-stat .stat-unit{font-size:var(--text-sm);color:var(--text-muted);margin-top:.25rem}.saved-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;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);border:1px solid rgba(var(--success-rgb),0.25)}.format-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .85rem;border-radius:999px;font-size:var(--text-xs);font-weight:500;background:rgba(var(--primary-rgb),0.08);color:var(--primary);border:1px solid rgba(var(--primary-rgb),0.2);transition:all .2s ease}.format-badge:hover{background:rgba(var(--primary-rgb),0.15);border-color:var(--primary)}.format-arrow{display:flex;align-items:center;justify-content:center;color:var(--success-color);font-size:var(--text-lg)}.file-info{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;background:rgba(var(--text-rgb),0.04);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-muted)}.comparison-table{width:100%;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}.comparison-table th{font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.comparison-table td{font-size:var(--text-sm);color:var(--text)}.comparison-table tr:last-child td{border-bottom:0}.check-icon{color:var(--success-color)}.benefit-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all .25s ease;height:100%}.benefit-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.1);border-color:rgba(var(--primary-rgb),0.3)}.benefit-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:rgba(var(--primary-rgb),0.1);color:var(--primary);font-size:var(--text-xl);margin-bottom:1rem}.faq-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s ease}.faq-card:hover{border-color:rgba(var(--primary-rgb),0.3)}.tool-link-item{text-decoration:none;padding:8px 0;display:block;transition:padding-left .2s ease}.tool-link-item:hover{padding-left:8px}.trust-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.trust-item{display:flex;align-items:center;gap:.75rem}.trust-item .label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.trust-item .value{font-size:.8rem;color:var(--text-muted)}.breadcrumb{background:transparent;padding:0;margin-bottom:1rem}.breadcrumb-item a{color:var(--text-muted);text-decoration:none}.breadcrumb-item a:hover{color:var(--primary)}.breadcrumb-item.active{color:var(--text)}#resultBox{animation:fadeInUp .5s ease}.btn-icon-animate{transition:transform .2s ease}.btn:hover .btn-icon-animate{transform:translateY(-2px)}@media(max-width:768px){.upload-zone{padding:1.5rem 1rem}.upload-icon{font-size:2rem}.conversion-stat .stat-value{font-size:var(--text-xl)}.conversion-stat{padding:1rem .75rem}.comparison-table th,.comparison-table td{padding:.5rem .75rem;font-size:var(--text-xs)}.trust-bar{flex-direction:column;align-items:flex-start}}