/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Navigation Styles */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 640px) {
    .nav-container {
        padding: 0 2rem;
    }
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #2563eb;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #374151;
}

.transition {
    transition-duration: 0.2s !important;
}

@media (max-width: 640px) {
    .file-drop-area {
        padding: 1rem !important;
        min-height: 180px;
    }
    
    h1.text-4xl {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .header-controls {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .main-header {
        margin-top: 0 !important;
    }
    
    .result-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .result-buttons {
        margin-top: 0.75rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    .result-buttons a,
    .result-buttons button {
        width: 100%;
    }
    
    .file-info {
        max-width: 100%;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 360px) {
    .format-options {
        grid-template-columns: 1fr !important;
    }
    
    .main-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Improve mobile typography */
@media (max-width: 480px) {
    body {
        font-size: 0.9375rem;
    }
    
    .text-sm {
        font-size: 0.8125rem;
    }
    
    .text-xs {
        font-size: 0.75rem;
    }
    
    /* Improve button spacing in small screens */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-group > * {
        width: 100%;
    }
}

/* Add better touch targets for mobile */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem 2rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        gap: 1rem;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    button, 
    .button,
    input[type="button"],
    a.button,
    a.download-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    .header-controls button {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for mobile navigation */
    .mobile-nav-spacing > * {
        margin-bottom: 0.75rem;
    }
}

/* Fix container width on larger screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for better keyboard navigation */
a:focus, button:focus, input:focus, [tabindex]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

body { background-color: #ffffff; }

/* Homepage: modern hero */
.hero-section { text-align: center; padding: 2.5rem 0; margin-bottom: 0.5rem; }
.hero-section h1 { font-size: 2.25rem; font-weight: 700; color: #1f2937; margin-bottom: 0.75rem; }
.hero-section p { font-size: 1.0625rem; color: #6b7280; max-width: 720px; margin: 0 auto; }
@media (min-width: 640px) { .hero-section { padding: 3.5rem 0; } .hero-section h1 { font-size: 2.75rem; } }

/* Section cards: consistent modern look */
.section-card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.section-card > h2 { padding-bottom: 0; }

/* Feature cards: subtle hover and elevation */
#features .grid > div { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#features .grid > div:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); border-color: #bfdbfe; }

/* Contact section links: cleaner interaction */
#contact .grid > div { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; }
#contact .grid a { transition: color .2s ease, transform .2s ease; }
#contact .grid a:hover { color: #2563eb; transform: translateX(2px); }

/* --- New Modern Homepage Styles --- */
/* Modern hero v2 */
.hero-modern { position: relative; padding: 3rem 0 2rem; background: #ffffff; }
.hero-title { font-size: clamp(2rem,4vw,3rem); font-weight: 800; color:#0f172a; letter-spacing:-0.02em; }
.hero-sub { font-size: 1.05rem; color:#64748b; max-width: 640px; margin-top: .5rem; }
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; background:#3b82f6; color:#fff; padding:.625rem 1rem; border-radius:.75rem; font-weight:600; box-shadow: 0 10px 20px rgba(59,130,246,.25); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(59,130,246,.3); background:#2563eb; }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background:#f1f5f9; color:#0f172a; padding:.625rem 1rem; border-radius:.75rem; font-weight:600; border:1px solid #e2e8f0; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.btn-secondary:hover { transform: translateY(-1px); background:#e2e8f0; border-color:#cbd5e1; }
.chips { gap:.5rem; }
.chip { display:inline-flex; align-items:center; padding:.375rem .625rem; font-size:.8125rem; border-radius:999px; background:#f8fafc; color:#2563eb; border:1px solid #e2e8f0; }
.hero-illustration { height: 280px; border-radius: 24px; background: radial-gradient(1200px circle at 0% 0%, #e0f2fe 0, transparent 35%), radial-gradient(800px circle at 100% 100%, #fce7f3 0, transparent 30%), linear-gradient(135deg,#f8fafc,#ffffff); border:1px solid #e5e7eb; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.hero-image { width: 100%; height: auto; border-radius: 24px; display: block; }

/* Section header */
.section-header { display:flex; flex-direction:column; gap:.25rem; }
.section-title { font-size: 1.5rem; font-weight: 800; letter-spacing:-0.01em; }
.section-sub { font-size:.95rem; color:#64748b; }

/* Feature items */
.feature-item { background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-item:hover { transform: translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.08); border-color:#bfdbfe; }
.feature-item h3 { font-weight:700; margin:.5rem 0; }
.feature-item p { color:#6b7280; font-size:.9rem; }
.badge { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid #e5e7eb; }
.badge-blue { background:#eff6ff; color:#2563eb; }
.badge-green { background:#ecfdf5; color:#16a34a; }
.badge-purple { background:#f5f3ff; color:#7c3aed; }
.badge-yellow { background:#fefce8; color:#ca8a04; }
.badge-orange { background:#fff7ed; color:#f97316; }

/* About items */
.about-item { background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.about-item:hover { transform: translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.08); border-color:#bfdbfe; }
.list-check { list-style:none; padding:0; margin:0; }
.list-check li { position:relative; padding-left:1.5rem; color:#475569; }
.list-check li::before { content:"\2713"; position:absolute; left:.25rem; top:.05rem; color:#16a34a; font-weight:700; }
.about-cta { background:#ffffff; }