/* ─── Webcraft AI — Main Stylesheet ─── */
@import './variables.css';
@import './base.css';
@import './components.css';
@import './sections.css';
@import './showcase.css';
@import './visuals.css';

/* ── Component slot wrappers (transparent) ── */
#banner-slot,
#nav-slot,
#footer-slot {
    display: contents;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .case-card { grid-template-columns: 1fr; gap: 2.5rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

    .site-nav { padding: 1rem 1.25rem; }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

    .hero { padding: 3rem 1.25rem; min-height: auto; }
    .hero h1 { font-size: 2rem; }
    .hero-description { font-size: 1rem; }

    .proof-bar { padding: 2rem 0; }

    .case-section,
    .services-section,
    .tech-section,
    .roadmap-section { padding: 4rem 1.25rem; }
    .cta-section { padding: 4rem 1.25rem 5rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

    .case-results-strip { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .case-metric { display: none; }

    .section-label { font-size: 0.6875rem; }
    h2 { font-size: 1.75rem !important; }

    .stat-block { padding: 1rem; }

    .top-banner { font-size: 0.75rem; padding: 0.5rem 0.75rem; }
    .top-banner-inner { gap: 0.375rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.625rem !important; }
    .hero-trust { flex-direction: column; gap: 0.75rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .footer-grid { gap: 1.5rem; }
}