/* Homepage-only styles. Utility layout/spacing/responsive breakpoints use
   Tailwind classes inline (matching the rest of the site); this file only
   holds the values Tailwind doesn't express cleanly — the design's exact
   gradients, shadows, and hover states. */

.home-hero {
    background: linear-gradient(120deg, #6a7bf7 0%, #8b5cf6 55%, #a855f7 100%);
}

.home-hero-title,
.home-cta-title {
    text-wrap: balance;
}

.home-hero-card {
    box-shadow: 0 20px 45px rgba(30, 20, 80, 0.25);
}

.home-snip-btn {
    background: #0f172a;
    transition: background 0.2s ease;
}
.home-snip-btn:hover {
    background: #1e293b;
}

.home-preview-frame {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.home-feature-icon {
    background: #f3ebff;
}

.home-feature-card {
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease;
}
.home-feature-card:hover {
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12);
}

.home-step-num {
    background: #7c3aed;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.home-cta {
    background: linear-gradient(120deg, #6a7bf7 0%, #8b5cf6 55%, #a855f7 100%);
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.22);
}

.home-cta-btn {
    color: #7c3aed;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    transition: background 0.2s ease, color 0.2s ease;
}
.home-cta-btn:hover {
    background: #f5f3ff;
    color: #6d28d9;
}

@media (max-width: 640px) {
    .home-hero-title {
        font-size: 34px;
    }
    .home-hero-sub {
        font-size: 16px;
    }
    .home-cta-title {
        font-size: 26px;
    }
}