body { background-color: #fdfdfd; color: #344054; font-family: "Inter", "Segoe UI", Tahoma, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
.top-header { background: linear-gradient(135deg, #0d6efd, #6610f2); }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: #0d6efd; }
.footer { background: #101828; }
.footer-link { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-link:hover { color: #fff; }
.alert-stack .alert { margin-bottom: 0.75rem; }
.hero-carousel { position: relative; }
.hero-carousel .carousel-item { height: 520px; position: relative; }
.carousel-background { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.55); }
.carousel-overlay { position: absolute; inset: 0; background: rgba(13,110,253,0.25); }
.carousel-caption { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); max-width: 540px; }
.cta-pill { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-radius: 999px; background: #0d6efd; color: #fff; text-decoration: none; box-shadow: 0 10px 25px rgba(13,110,253,0.25); transition: transform .2s ease, box-shadow .2s ease; }
.cta-pill.secondary { background: #f8f9fc; color: #344054; box-shadow: none; border: 1px solid rgba(13,110,253,0.15); }
.cta-pill .icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); font-size: 1.25rem; }
.cta-pill.secondary .icon { background: rgba(13,110,253,0.1); color: #0d6efd; }
.cta-pill:hover { transform: translateY(-4px); box-shadow: 0 14px 35px rgba(13,110,253,0.3); }
.service-card { background: #fff; border-radius: 1rem; box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08); }
.service-icon { font-size: 2rem; color: #0d6efd; }
.stats-card { background: linear-gradient(135deg, #0d6efd, #6610f2); color: #fff; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(13,110,253,0.35); }
.summary-card { background: #fff; border-radius: 1rem; padding: 1.75rem; box-shadow: 0 20px 45px rgba(15,23,42,0.08); }
.summary-card .label { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; color: #6c757d; }
.summary-card .value { font-size: 1.75rem; font-weight: 700; margin: 0.25rem 0 0.5rem; }
.metric-card { background: rgba(255,255,255,0.15); border-radius: 1rem; padding: 2rem; backdrop-filter: blur(6px); }
.map-placeholder { background: rgba(13,110,253,0.08); border-radius: 0.75rem; padding: 1.5rem; border: 1px dashed rgba(13,110,253,0.25); }
.response-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.response-item { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); border: 1px solid rgba(13,110,253,0.06); }
.response-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6c757d; margin-bottom: 0.35rem; }
.response-value { font-size: 0.95rem; color: #1f2937; }
.response-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.response-table caption { caption-side: top; font-weight: 600; margin-bottom: 0.5rem; color: #0d6efd; }
.response-table th { text-align: left; padding: 0.45rem; background: rgba(13,110,253,0.08); width: 40%; }
.response-table td { padding: 0.45rem; background: rgba(248,249,252,0.85); word-break: break-word; }
.response-list { padding-left: 1.1rem; margin: 0; }

.history-section h6 { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #475467; margin-bottom: 0.75rem; }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.history-table th { width: 38%; padding: 0.45rem 0.6rem; background: rgba(13,110,253,0.08); font-weight: 600; }
.history-table td { padding: 0.45rem 0.6rem; background: rgba(248,249,252,0.85); }
.history-table tr + tr { border-top: 1px solid rgba(148,163,184,0.2); }

.response-pre { background: #0f172a; color: #f8fafc; padding: 1rem; border-radius: 0.75rem; max-height: 260px; overflow: auto; font-size: 0.85rem; }
.tiny { font-size: 0.75rem; }

@media (max-width: 767px) {
    .carousel-caption { left: 5%; right: 5%; top: 55%; }
    .hero-carousel .carousel-item { height: 420px; }
    .cta-pill { width: 100%; justify-content: center; }
}