/* ===== Base ===== */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ===== Page transitions ===== */
.page { animation: pageIn 0.4s ease-out; }
.page.hidden { display: none; }

@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Active nav link ===== */
.nav-link.active {
    background-color: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.25);
}

#mobile-menu a.active-mobile {
    background-color: rgba(14, 165, 233, 0.08);
    color: #0284c7;
    font-weight: 600;
}

.quick-action {
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9999px;
    padding: 8px 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quick-action:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.3);
}

/* ===== Page header overlap effect ===== */
.page-header + div,
.page-header + .max-w-3xl {
    position: relative;
    z-index: 1;
}

/* ===== Subtle card entrance stagger ===== */
.page.active .group,
.page.active .bg-white {
    animation: cardIn 0.5s ease-out both;
}
.page.active .group:nth-child(2),
.page.active .bg-white:nth-child(2) { animation-delay: 0.05s; }
.page.active .group:nth-child(3),
.page.active .bg-white:nth-child(3) { animation-delay: 0.1s; }
.page.active .group:nth-child(4),
.page.active .bg-white:nth-child(4) { animation-delay: 0.15s; }
.page.active .group:nth-child(5),
.page.active .bg-white:nth-child(5) { animation-delay: 0.2s; }
.page.active .group:nth-child(6),
.page.active .bg-white:nth-child(6) { animation-delay: 0.25s; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Print ===== */
@media print {
    nav, footer, .page-header { display: none; }
    .page { display: block !important; page-break-after: always; }
    .page.hidden { display: block !important; }
}