/* Homepage Converter — Premium SaaS */
.hero-compact {
    padding: 2.5rem 0 1rem;
    color: #fff;
    background: linear-gradient(180deg, #0f172a 0%, transparent 100%);
}
.hero-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; margin-bottom: 0.5rem; }
.hero-desc { opacity: 0.8; margin-bottom: 0.5rem; }
.guest-hint { font-size: 0.9rem; opacity: 0.7; }
.guest-hint a { color: #818cf8; }

.home-converter {
    padding: 0 0 3rem;
    margin-top: -0.5rem;
}
.converter-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 1.5rem;
    border: 1px solid rgba(99,102,241,0.15);
}
[data-theme="dark"] .converter-card {
    background: #1e293b;
    border-color: #334155;
}
.converter-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .converter-card-header { border-color: #334155; }
.converter-title { font-size: 1.35rem; font-weight: 700; margin: 0; color: #0f172a; }
[data-theme="dark"] .converter-title { color: #f1f5f9; }
.converter-subtitle { font-size: 0.875rem; color: #64748b; margin: 0.25rem 0 0; }

.usage-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.usage-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #f1f5f9; color: #475569;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600;
}
[data-theme="dark"] .usage-pill { background: #334155; color: #cbd5e1; }
.usage-pill i { color: #6366f1; }

.converter-toolbar-home {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-bottom: 1rem;
}
.btn-convert-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff; border: none; font-weight: 600;
    padding: 0.6rem 1.25rem; border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-convert-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99,102,241,0.4); color: #fff; }
.btn-convert-secondary {
    background: #f8fafc; border: 1px solid #e2e8f0; color: #334155;
    padding: 0.6rem 1rem; border-radius: 10px; font-weight: 500;
}
[data-theme="dark"] .btn-convert-secondary { background: #0f172a; border-color: #475569; color: #e2e8f0; }
.btn-convert-secondary:hover { border-color: #6366f1; color: #6366f1; }

.converter-box {
    background: #f8fafc;
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    height: 100%;
}
[data-theme="dark"] .converter-box { background: #0f172a; border-color: #334155; }
.converter-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.5rem; display: block; }
.font-select-home { border-radius: 10px; margin-bottom: 0.75rem; font-weight: 500; }
.converter-textarea-home {
    width: 100%; border: none; background: transparent;
    resize: vertical; min-height: 280px;
    font-size: 1.2rem; line-height: 1.85;
    color: inherit; outline: none;
}
.converter-textarea-home:focus { box-shadow: none; }
.converter-meta { font-size: 0.8rem; color: #94a3b8; margin-top: 0.5rem; display: flex; justify-content: space-between; }
.convert-status-home { color: #10b981; font-weight: 600; }
.convert-status-home.error { color: #ef4444; }
.convert-status-home.loading { color: #6366f1; }

.features-compact { background: #0f172a; color: #fff; }
.feature-mini {
    text-align: center; padding: 1.5rem;
    background: rgba(255,255,255,0.05); border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08); height: 100%;
}
.feature-mini i { font-size: 1.75rem; color: #818cf8; margin-bottom: 0.75rem; display: block; }
.feature-mini p { font-size: 0.85rem; opacity: 0.7; margin: 0; }

.limit-modal-content { border-radius: 16px; border: none; }
.limit-icon { font-size: 3rem; color: #f59e0b; }

@media (max-width: 991px) {
    .converter-card { padding: 1rem; border-radius: 16px; }
    .converter-textarea-home { min-height: 200px; font-size: 16px; }
    .converter-toolbar-home .btn { flex: 1 1 calc(50% - 0.25rem); min-height: 44px; }
    .converter-card-header { flex-direction: column; }
}
@media (max-width: 576px) {
    .home-converter .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .usage-pills { width: 100%; }
}