/* HOME CSS */
nav.topnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1rem 5%; background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); }
.nav-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--text-main); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-link { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; transition: none; }
.nav-link:hover { color: var(--text-main); }
.nav-sep { width: 1px; height: 1rem; background: var(--border-subtle); }
.lang-btn { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; cursor: pointer; }
.lang-btn.active { color: var(--text-main); font-weight: 600; }
.theme-btn { background: none; border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-muted); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; transition: none; }
.theme-btn:hover { color: var(--text-main); border-color: var(--text-main); }
.icon-dark { display: block; }
.icon-light { display: none; }
[data-theme="light"] .icon-dark { display: none; }
[data-theme="light"] .icon-light { display: block; }

.hero { padding: 4rem 5% 4rem; max-width: 900px; margin: 0 auto; text-align: center; }
.trust-pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: #10b981; border: 1px solid rgba(16,185,129,0.3); border-radius: 999px; padding: 0.5rem 1rem; margin-bottom: 2rem; }
h1.hero-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; line-height: 1.2; letter-spacing: -1px; margin-bottom: 1rem; }
h1.hero-title strong { font-weight: 700; }
.hero-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; max-width: 600px; margin: 0 auto 2rem; font-weight: 300; }
.hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cta-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--text-main); color: var(--bg-darkest); text-decoration: none; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; font-size: 1rem; transition: none; }
.cta-primary:hover { opacity: 0.9; }
.cta-secondary { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); text-decoration: none; padding: 1rem 2rem; border-radius: 8px; font-size: 1rem; border: 1px solid var(--border-subtle); transition: none; }
.cta-secondary:hover { color: var(--text-main); border-color: var(--text-main); }

.hero-image-wrapper { width: 100%; max-width: 800px; margin: 3rem auto 0; padding: 0 5%; }
.hero-image-wrapper img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border-subtle); }

.trust-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 2rem 5%; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin: 0 0 4rem; }
.trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.trust-item svg { color: #10b981; flex-shrink: 0; }

.section { padding: 0 5% 4rem; max-width: 1080px; margin: 0 auto; }
.section-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 2rem; font-weight: 500; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; margin-bottom: 4rem; }
.tool-card { background: var(--bg-darkest); padding: 2rem; text-decoration: none; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.tool-card:hover { background: var(--bg-dark); }
.card-arrow { position: absolute; top: 2rem; right: 2rem; opacity: 1; color: var(--text-muted); }
.tool-icon { color: var(--text-main); opacity: 0.8; }
.tool-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.tool-name { font-size: 1.2rem; font-weight: 600; color: var(--text-main); }
.tool-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; font-weight: 300; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tool-tag { font-size: 0.8rem; color: var(--text-muted); background: var(--glass-bg); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0.2rem 0.5rem; }

.feature-block { border-top: 1px solid var(--border-subtle); padding: 4rem 0; }
.feature-block:last-of-type { border-bottom: 1px solid var(--border-subtle); }
.feature-inner { max-width: 1080px; margin: 0 auto; padding: 0 5%; }
.feature-label { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: #10b981; font-weight: 500; margin-bottom: 1rem; }
.feature-title { font-size: 2rem; font-weight: 400; margin-bottom: 1rem; }
.feature-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; max-width: 600px; margin-bottom: 2rem; font-weight: 300; }
.feature-list { display: flex; flex-direction: column; gap: 1rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 1rem; color: var(--text-muted); line-height: 1.6; list-style: none; }
.feature-list li svg { color: #10b981; flex-shrink: 0; margin-top: 4px; }
.feature-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; font-size: 1rem; font-weight: 500; color: var(--text-main); text-decoration: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
.feature-cta:hover { border-color: var(--text-main); }

.faq-section { max-width: 720px; margin: 0 auto; padding: 4rem 5%; }
.faq-title { font-size: 2rem; font-weight: 400; margin-bottom: 1rem; }
.faq-sub { font-size: 1rem; color: var(--text-muted); margin-bottom: 2rem; font-weight: 300; }
details { border-bottom: 1px solid var(--border-subtle); padding: 1rem 0; }
summary { font-size: 1rem; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--text-muted); flex-shrink: 0; }
details[open] summary::after { content: '−'; }
details p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; padding-top: 1rem; font-weight: 300; }

footer.home-footer { border-top: 1px solid var(--border-subtle); padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-left { font-size: 1rem; color: var(--text-muted); font-weight: 300; }
.footer-right { display: flex; gap: 1rem; }
.footer-right a { font-size: 1rem; color: var(--text-muted); text-decoration: none; }
.footer-right a:hover { color: var(--text-main); }

@media (max-width: 640px) {
    .trust-bar { gap: 1rem; }
    footer.home-footer { flex-direction: column; align-items: flex-start; }
    .hero { padding: 3rem 5%; }
    h1.hero-title { font-size: clamp(2rem, 8vw, 2.5rem); letter-spacing: -0.5px; }
    .tools-grid { grid-template-columns: 1fr; border-radius: 12px; }
    .tool-card { padding: 1.5rem; }
    .feature-block { padding: 3rem 0; }
    .feature-title { font-size: 1.5rem; }
    .faq-title { font-size: 1.5rem; }
    .faq-section { padding: 3rem 5%; }
}