@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
    --qbp-navy-900: #10213a;
    --qbp-navy-800: #1f3b63;
    --qbp-navy-700: #2e4e79;
    --qbp-gold-500: #c9a227;
    --qbp-gold-400: #dfbf63;
    --qbp-bg: #f4f7fc;
    --qbp-surface: #ffffff;
    --qbp-surface-soft: #eef3fb;
    --qbp-border: #d6dfed;
    --qbp-text: #12233f;
    --qbp-muted: #5c6f88;
    --qbp-display: "Sora", "Manrope", "Segoe UI", sans-serif;
    --qbp-page-pad-x: 1rem;
    --qbp-page-pad-y: 1rem;
}

@media (min-width: 640px) {
    :root {
        --qbp-page-pad-x: 1.5rem;
        --qbp-page-pad-y: 1.5rem;
    }
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 86% -8%, #e7eefb 0%, transparent 34%),
        radial-gradient(circle at 0% 10%, #edf3ff 0%, transparent 36%),
        linear-gradient(180deg, #f8fbff 0%, var(--qbp-bg) 48%, #f1f6fd 100%);
    color: var(--qbp-text);
}

.qbp-main {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--qbp-page-pad-x);
    padding-block: var(--qbp-page-pad-y);
}

.qbp-page-section {
    padding-inline: var(--qbp-page-pad-x);
}

.qbp-notification-wrap {
    padding-inline: var(--qbp-page-pad-x);
}

.qbp-navbar {
    padding-inline: var(--qbp-page-pad-x);
}

.qbp-brand {
    max-width: 10.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qbp-action-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.qbp-action-stack > *,
.qbp-action-stack > form {
    width: 100%;
}

.qbp-action-stack .btn {
    width: 100%;
    justify-content: center;
}

.qbp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .qbp-brand {
        max-width: none;
    }

    .qbp-action-stack {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .qbp-action-stack > *,
    .qbp-action-stack > form {
        width: auto;
    }

    .qbp-action-stack .btn {
        width: auto;
    }
}

.bg-base-100,
.card.bg-base-100,
.stats.bg-base-100,
.table thead,
.table tfoot {
    background-color: var(--qbp-surface) !important;
    color: var(--qbp-text) !important;
}

.bg-base-200,
.card.bg-base-200 {
    background-color: var(--qbp-surface-soft) !important;
    color: var(--qbp-text) !important;
}

.border-base-300 {
    border-color: var(--qbp-border) !important;
}

.text-base-content\/70,
.text-base-content\/60,
.stat-title {
    color: var(--qbp-muted) !important;
}

.navbar,
header[th\:fragment="app-header"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--qbp-border) !important;
    box-shadow: 0 12px 28px rgba(12, 39, 76, 0.08);
    backdrop-filter: blur(8px);
}

footer {
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%) !important;
}

.card,
.stats {
    border: 1px solid rgba(188, 205, 229, 0.8);
    box-shadow: 0 14px 32px rgba(15, 43, 79, 0.08);
    border-radius: 1rem;
}

.btn {
    border-radius: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: var(--qbp-navy-900) !important;
    border-color: var(--qbp-navy-900) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #0d1d33 !important;
    border-color: #0d1d33 !important;
}

.btn-secondary {
    background-color: var(--qbp-navy-700) !important;
    border-color: var(--qbp-navy-700) !important;
    color: #fff !important;
}

.btn-secondary:hover {
    background-color: #27466d !important;
    border-color: #27466d !important;
}

.btn-accent,
.btn-info {
    background-color: var(--qbp-gold-500) !important;
    border-color: var(--qbp-gold-500) !important;
    color: #1c2a3f !important;
}

.btn-accent:hover,
.btn-info:hover {
    background-color: var(--qbp-gold-400) !important;
    border-color: var(--qbp-gold-400) !important;
}

.btn-outline {
    border-color: #3f5f8c !important;
    color: #28466f !important;
    background-color: transparent !important;
}

.btn-outline:hover {
    background-color: #f0f5fd !important;
    border-color: #36577f !important;
    color: #1e3a63 !important;
}

.btn-ghost {
    color: var(--qbp-text) !important;
}

.badge-primary {
    background-color: var(--qbp-navy-900) !important;
    border-color: var(--qbp-navy-900) !important;
    color: #fff !important;
}

.badge-secondary {
    background-color: var(--qbp-navy-700) !important;
    border-color: var(--qbp-navy-700) !important;
    color: #fff !important;
}

.badge-accent,
.badge-info {
    background-color: var(--qbp-gold-500) !important;
    border-color: var(--qbp-gold-500) !important;
    color: #1f3046 !important;
}

.badge-outline {
    border-color: #bfd0e8 !important;
    color: #26446e !important;
}

.table :where(th, td) {
    border-color: #d9e3f2;
    color: var(--qbp-text);
}

.table-zebra tbody tr:nth-child(even) {
    background-color: #f6f9ff;
}

.input,
.select {
    background-color: #fff !important;
    border-color: #b9cbe4 !important;
    color: var(--qbp-text) !important;
}

.input::placeholder {
    color: #7a8faa;
}

.input:focus,
.select:focus {
    outline: none;
    border-color: #4a74ad !important;
    box-shadow: 0 0 0 3px rgba(78, 121, 177, 0.18);
}

.menu :where(li > a:hover),
.menu :where(li > a:active),
.link:hover {
    background-color: #edf3fc;
    color: #16365d;
}

.alert {
    background-color: #f7fbff !important;
    border: 1px solid #c8d8ef;
    color: var(--qbp-text) !important;
}

.hero {
    background:
        radial-gradient(circle at 74% 12%, rgba(207, 173, 72, 0.24) 0%, rgba(207, 173, 72, 0.08) 20%, transparent 42%),
        linear-gradient(160deg, #ffffff 0%, #f4f8ff 55%, #edf3fd 100%) !important;
}

.landing-page {
    position: relative;
    isolation: isolate;
}

.landing-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 8%, rgba(215, 233, 255, 0.58) 0%, transparent 36%),
        radial-gradient(circle at 12% 20%, rgba(255, 241, 210, 0.5) 0%, transparent 30%);
    z-index: -1;
}

.landing-hero {
    position: relative;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #b7c8e5;
    background: linear-gradient(180deg, #f8fbff, #edf3ff);
    color: #193b63;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.72rem;
}

.landing-title {
    font-family: var(--qbp-display);
    font-size: clamp(2rem, 5.4vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 100%;
}

.landing-title-accent {
    display: block;
    color: #234f86;
}

.landing-description {
    max-width: 45ch;
    color: var(--qbp-muted);
    font-size: 1.04rem;
}

.landing-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.landing-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 48ch;
    color: #1f3d63;
    font-weight: 600;
}

.landing-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #eff5ff, #dbe8fa);
    border: 1px solid #bfd2ed;
    color: #305582;
    font-size: 0.68rem;
    flex-shrink: 0;
    font-family: var(--qbp-display);
    font-weight: 700;
    margin-top: 0.08rem;
}

.landing-note {
    color: #4b6383;
    font-size: 0.92rem;
}

.landing-panel {
    border: 1px solid #cad8eb;
    border-radius: 1.25rem;
    padding: 0.8rem;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.94));
    box-shadow: 0 18px 36px rgba(22, 53, 91, 0.13);
}

.landing-metric-card {
    border: 1px solid #d2dff0;
    border-radius: 0.95rem;
    padding: 0.8rem 0.85rem;
    background: #fff;
}

.landing-metric-value {
    margin: 0;
    font-family: var(--qbp-display);
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    color: #15345a;
}

.landing-metric-label {
    margin: 0.2rem 0 0;
    color: #5a6f8b;
    font-size: 0.78rem;
    line-height: 1.3;
}

.landing-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.landing-visual-main {
    grid-column: span 2;
    border: 1px solid #ccdaee;
    border-radius: 0.95rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 11px 26px rgba(28, 58, 96, 0.11);
}

.landing-visual-small {
    border: 1px solid #ccdaee;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(28, 58, 96, 0.1);
}

.landing-section-head {
    margin-bottom: 1rem;
}

.landing-section-head h2 {
    margin: 0;
    font-family: var(--qbp-display);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.landing-section-head p {
    margin-top: 0.55rem;
    color: var(--qbp-muted);
    max-width: 72ch;
}

.landing-audience-card,
.landing-step-card,
.landing-value-card {
    border: 1px solid #cfddf0;
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    box-shadow: 0 12px 28px rgba(20, 50, 85, 0.08);
}

.landing-audience-card h3,
.landing-step-card h3,
.landing-value-card h3 {
    margin: 0;
    font-family: var(--qbp-display);
    font-size: 1.12rem;
    color: #16365d;
}

.landing-audience-card p,
.landing-step-card p,
.landing-value-card p {
    margin-top: 0.52rem;
    color: #596d88;
}

.landing-step-time {
    display: inline-flex;
    border: 1px solid #c2d6f2;
    border-radius: 999px;
    background: #edf4ff;
    color: #244a79;
    padding: 0.25rem 0.55rem;
    font-family: var(--qbp-display);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
}

.landing-final-card {
    border: 1px solid #c3d7f1;
    border-radius: 1.3rem;
    text-align: center;
    padding: 2.2rem 1.25rem;
    background:
        radial-gradient(circle at 18% -10%, rgba(255, 227, 164, 0.56) 0%, transparent 33%),
        radial-gradient(circle at 90% 8%, rgba(213, 231, 255, 0.68) 0%, transparent 42%),
        linear-gradient(150deg, #ffffff 0%, #edf4ff 100%);
    box-shadow: 0 18px 36px rgba(20, 53, 90, 0.11);
}

.landing-final-card h2 {
    margin: 0;
    font-family: var(--qbp-display);
    font-size: clamp(1.52rem, 3.8vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.landing-final-card p {
    max-width: 55ch;
    margin: 0.7rem auto 1.2rem;
    color: #556a86;
}

.landing-intro,
.landing-panel,
.landing-audience-card,
.landing-step-card,
.landing-value-card,
.landing-final-card {
    animation: landing-rise 680ms ease-out both;
}

.landing-panel {
    animation-delay: 100ms;
}

.landing-audience-card:nth-child(2),
.landing-step-card:nth-child(2),
.landing-value-card:nth-child(2) {
    animation-delay: 90ms;
}

.landing-audience-card:nth-child(3),
.landing-step-card:nth-child(3),
.landing-value-card:nth-child(3) {
    animation-delay: 160ms;
}

@keyframes landing-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 640px) {
    .landing-title {
        max-width: 16ch;
    }

    .landing-panel {
        padding: 1rem;
    }

    .landing-audience-card,
    .landing-step-card,
    .landing-value-card {
        padding: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-intro,
    .landing-panel,
    .landing-audience-card,
    .landing-step-card,
    .landing-value-card,
    .landing-final-card {
        animation: none;
    }
}