/* DrawSort landing — footer + responsive + animations. Split from the imported monolith (module-size
   guard: one stylesheet layer per file, load order = the <link> order). */
/* ============================================================
   9. FOOTER
   ============================================================ */
footer {
    background: var(--dark);
    border-top: 1px solid var(--dark-border);
    padding: 40px 24px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-logo-img {
    height: 22px;
    width: auto;
    display: block;
}

.footer-copy {
    font-size: 14px;
    color: var(--text-faint-dark);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-links a {
    font-size: 14px;
    color: var(--text-faint-dark);
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: var(--text-muted-dark);
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 900px) {
    .nav-links { display: none; }

    .hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .hero-sub { font-size: 16px; }
    .hero-ctas { flex-direction: column; }

    .hero-mockup-table-header,
    .hero-mockup-row {
        grid-template-columns: 80px 1fr 60px 80px 60px;
        font-size: 10px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .steps-grid::before { display: none; }

    .step {
        padding: 0;
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .step-number { margin-bottom: 0; }
    .step-text { flex: 1; }

    .trust-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

    .pricing-card.featured { order: -1; }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .section-title { font-size: 28px; }
    .final-cta h2 { font-size: 32px; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 600px) {
    .hero {
        padding: calc(var(--nav-height) + 48px) 20px 24px;
    }

    .hero h1 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    .hero-sub { font-size: 15px; }
    .hero-ctas { margin-bottom: 48px; }

    .btn-primary, .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .value-prop, .how-it-works, .pricing, .carousel-section {
        padding: 72px 20px;
    }

    .section-title { font-size: 26px; }

    .trust-inner {
        grid-template-columns: 1fr 1fr;
    }

    .trust-number { font-size: 28px; }

    .pricing-amount .price { font-size: 36px; }

    .footer-links { gap: 16px; }

    .final-cta { padding: 72px 20px; }
    .final-cta h2 { font-size: 28px; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-inner > * {
    animation: fadeUp 0.6s ease both;
}

.hero-inner > *:nth-child(1) { animation-delay: 0s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.08s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.16s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.28s; }