/* ═══════════════════════════════════════════════════════════════════
   Inja Dark Theme — site-wide
   Applied to every user-facing page via _Layout.cshtml
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────── */
body {
    background: #05060f;
    color: #e6e8ff;
}

.inja-shell {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(124, 58, 237, .35), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, rgba(59, 130, 246, .25), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(236, 72, 153, .22), transparent 60%),
        linear-gradient(180deg, #05060f 0%, #0a0a23 60%, #0b1437 100%);
    overflow-x: hidden;
}

/* Stars / grid */
.inja-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 40px 40px, 80px 80px;
    background-position: 0 0, 20px 20px;
    animation: starsDrift 60s linear infinite;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

@keyframes starsDrift {
    from { background-position: 0 0, 20px 20px; }
    to   { background-position: 400px 400px, 420px 420px; }
}

.inja-shell > *:where(:not(.modal):not(.modal-backdrop):not(.offcanvas):not(.offcanvas-backdrop):not(.toast-container)) { position: relative; z-index: 1; }

/* Floating blobs */
.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
.blob-1 { width: 420px; height: 420px; background: #7c3aed; top: -120px; right: -80px;  animation: blobMove 12s ease-in-out infinite; }
.blob-2 { width: 360px; height: 360px; background: #3b82f6; bottom: -120px; left: -80px; animation: blobMove 14s ease-in-out infinite reverse; }
.blob-3 { width: 280px; height: 280px; background: #ec4899; top: 40%; left: 50%; animation: blobMove 16s ease-in-out infinite; animation-delay: -4s; }

@keyframes blobMove {
    0%,100% { transform: translate(0,0) scale(1); }
    25%     { transform: translate(40px,-30px) scale(1.1); }
    50%     { transform: translate(-30px,40px) scale(.95); }
    75%     { transform: translate(20px,20px) scale(1.05); }
}

/* ── Navbar / Footer (dark mode) ───────────────────────────────────── */
body .navbar.bg-white {
    background: rgba(10, 10, 35, .65) !important;
    border-bottom: 1px solid rgba(167,139,250,.18) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
body .navbar.bg-white .navbar-brand {
    font-weight: 900;
    font-size: 1.4rem;
    background: linear-gradient(135deg,#a78bfa,#60a5fa,#ec4899);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: gradientShift 6s ease infinite;
}
body .navbar.bg-white .nav-link.text-dark {
    color: #e6e8ff !important;
}
body .navbar.bg-white .navbar-toggler {
    color: #e6e8ff;
}
body .navbar.bg-white .navbar-toggler-icon {
    filter: invert(1);
}

body footer.footer {
    color: #6c7099 !important;
    border-top: 1px solid rgba(167,139,250,.15) !important;
    background: transparent;
}

/* ── Sidebar dark mode ─────────────────────────────────────────────── */
body .user-sidebar {
    background: rgba(10,10,35,.5) !important;
    border-left: 1px solid rgba(167,139,250,.18) !important;
    backdrop-filter: blur(10px);
}
body .sidebar-link {
    color: #c7c9e8 !important;
}
body .sidebar-link:hover,
body .sidebar-link.active {
    background: rgba(167,139,250,.12) !important;
    color: #fff !important;
}
body .sidebar-link i {
    color: #a78bfa !important;
}
body .offcanvas {
    background: #0a0a23 !important;
    color: #e6e8ff;
    position: fixed !important;
}
body .offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(167,139,250,.18) !important;
}
body .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ── Bootstrap component overrides ─────────────────────────────────── */
body .card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    color: #d6d8f0;
    backdrop-filter: blur(12px);
    border-radius: 1rem;
}
body .card-body { color: #d6d8f0; }
body .card-title, body .card h1, body .card h2,
body .card h3, body .card h4, body .card h5, body .card h6 { color: #fff; }
body .card .text-muted { color: #a3a8d4 !important; }

body hr { border-color: rgba(167,139,250,.18); opacity: 1; }

body .form-control,
body .form-select,
body textarea.form-control {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(167,139,250,.25);
    color: #e6e8ff;
}
body .form-control::placeholder { color: #8b8fb8; }
body .form-control:focus,
body .form-select:focus {
    background: rgba(255,255,255,.1);
    border-color: #a78bfa;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(124,58,237,.25);
}
body .form-control:disabled,
body .form-control[readonly] { background: rgba(255,255,255,.03); }

body .form-label { color: #e6e8ff; }
body .form-check-input {
    background-color: rgba(255,255,255,.08);
    border-color: rgba(167,139,250,.4);
}
body .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

body .table {
    color: #d6d8f0;
    --bs-table-bg: transparent;
}
body .table > :not(caption) > * > * {
    background: transparent;
    color: inherit;
    border-bottom-color: rgba(167,139,250,.15);
}
body .table-light,
body .table > thead {
    --bs-table-bg: rgba(167,139,250,.08);
    --bs-table-color: #e6e8ff;
}
body .table-hover > tbody > tr:hover > * {
    background: rgba(167,139,250,.06);
    color: #fff;
}

body .alert {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(167,139,250,.25);
    color: #e6e8ff;
}
body .alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); color: #bbf7d0; }
body .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fde68a; }
body .alert-danger  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #fecaca; }
body .alert-info    { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.4); color: #bfdbfe; }

body .modal-content {
    background: #0f1030;
    color: #e6e8ff;
    border: 1px solid rgba(167,139,250,.3);
    border-radius: 1rem;
}
body .modal-header, body .modal-footer {
    border-color: rgba(167,139,250,.18);
}

body .list-group-item {
    background: rgba(255,255,255,.04);
    color: #e6e8ff;
    border-color: rgba(167,139,250,.15);
}
body .list-group-item.active,
body .list-group-item-action.active {
    background: rgba(124,58,237,.35);
    color: #fff;
    border-color: rgba(167,139,250,.5);
}
body .list-group-item-action:hover {
    background: rgba(167,139,250,.12);
    color: #fff;
}

body .progress { background: rgba(255,255,255,.08); }

/* Buttons */
body .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    border: 0;
    box-shadow: 0 6px 18px rgba(124,58,237,.4);
}
body .btn-primary:hover { background: linear-gradient(135deg, #6d28d9, #2563eb); }

body .btn-success {
    background: linear-gradient(135deg,#22c55e,#06b6d4);
    border: 0;
}
body .btn-success:hover { background: linear-gradient(135deg,#16a34a,#0891b2); }

body .btn-outline-primary,
body .btn-outline-secondary,
body .btn-outline-success,
body .btn-outline-danger,
body .btn-outline-dark,
body .btn-outline-violet {
    background: rgba(255,255,255,.04);
    color: #e6e8ff;
    border-color: rgba(167,139,250,.4);
}
body .btn-outline-primary:hover,
body .btn-outline-secondary:hover,
body .btn-outline-success:hover,
body .btn-outline-violet:hover {
    background: rgba(167,139,250,.18);
    color: #fff;
    border-color: #a78bfa;
}
body .btn-outline-danger:hover {
    background: rgba(239,68,68,.18);
    color: #fff;
    border-color: #f87171;
}

body .text-muted { color: #a3a8d4 !important; }
body .text-violet { color: #a78bfa !important; }
body .text-dark { color: #e6e8ff !important; }
body .border, body .border-top, body .border-bottom { border-color: rgba(167,139,250,.18) !important; }

/* ═════════════════════════════════════════════════════════════════════
   HERO / HOME-PAGE COMPONENTS
   ═════════════════════════════════════════════════════════════════════ */

.inja-page {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
}

.inja-topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    max-width: 1280px;
    margin: 0 auto 2rem;
}

.inja-logo {
    font-weight: 900;
    font-size: 1.6rem;
    background: linear-gradient(135deg,#a78bfa,#60a5fa,#ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -.5px;
    animation: gradientShift 6s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}

.inja-hero {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 1rem;
}

.inja-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(167,139,250,.35);
    color: #e9d5ff;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(124,58,237,.25);
    animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%,100% { box-shadow: 0 0 20px rgba(124,58,237,.25); }
    50%     { box-shadow: 0 0 40px rgba(124,58,237,.6); }
}

.inja-hero h1 {
    font-weight: 900;
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: -1px;
    line-height: 1.25;
    margin-top: 1.25rem;
}

.gradient-text {
    background: linear-gradient(135deg,#a78bfa 0%,#60a5fa 50%,#ec4899 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 5s ease infinite;
}

.inja-hero .lead {
    font-size: 1.15rem;
    color: #c7c9e8;
    max-width: 760px;
    margin: 1.25rem auto 0;
    line-height: 2;
}

.hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.btn-inja-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#7c3aed,#3b82f6);
    background-size: 200% 200%;
    border: 0;
    color: #fff !important;
    font-weight: 700;
    padding: .85rem 1.85rem;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(124,58,237,.55), inset 0 0 0 1px rgba(255,255,255,.1);
    transition: transform .25s ease, box-shadow .25s ease, background-position .6s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-inja-primary:hover {
    transform: translateY(-3px) scale(1.03);
    background-position: 100% 50%;
    box-shadow: 0 18px 40px rgba(124,58,237,.7);
}
.btn-inja-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: shine 3.5s infinite;
    pointer-events: none;
}
@keyframes shine {
    0%   { left: -75%; }
    60%  { left: 130%; }
    100% { left: 130%; }
}

.btn-inja-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    color: #e6e8ff !important;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.btn-inja-ghost:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(167,139,250,.5);
    transform: translateY(-2px);
}

.feature-chips {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(167,139,250,.1);
    border: 1px solid rgba(167,139,250,.25);
    color: #e9d5ff;
    font-size: .85rem;
    transition: transform .3s ease, background .3s ease;
}
.feature-chip:hover {
    transform: translateY(-3px) rotate(-1deg);
    background: rgba(167,139,250,.22);
}

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-title h2 {
    font-weight: 900;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.section-title p { color: #a3a8d4; margin-top: .5rem; }

.qa-grid {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.qa-card {
    position: relative;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.75rem;
    height: 100%;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
    color: #d6d8f0;
}
.qa-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167,139,250,.5), rgba(59,130,246,.5), rgba(236,72,153,.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.qa-card:hover {
    transform: translateY(-10px) rotate(-.3deg);
    box-shadow: 0 25px 60px rgba(124,58,237,.35);
}
.qa-card:hover::before { opacity: 1; }

.qa-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    background: linear-gradient(135deg,#4c1d95,#3b82f6);
    box-shadow: 0 10px 25px rgba(76,29,149,.45);
    margin-bottom: 1.1rem;
    transition: transform .4s ease;
}
.qa-card:hover .qa-icon { transform: rotate(-8deg) scale(1.1); }

.qa-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .75rem;
}
.qa-card p {
    color: #b8bce0;
    margin: 0;
    line-height: 2;
    font-size: .95rem;
}

.steps-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 5rem auto;
    padding: 0 1rem;
}
.step-card { text-align: center; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    background: rgba(167,139,250,.18);
    color: #e9d5ff;
    font-weight: 800;
    margin-bottom: .75rem;
    border: 1px solid rgba(167,139,250,.4);
}

.cta-band {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 5rem auto 0;
    padding: 3.5rem 1.5rem;
    border-radius: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(26,22,96,.85), rgba(76,29,149,.85));
    border: 1px solid rgba(167,139,250,.35);
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.cta-band .pulse {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 30% 30%, rgba(124,58,237,.55), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(59,130,246,.45), transparent 60%);
    animation: injaPulse 7s ease-in-out infinite;
    z-index: 0;
}
@keyframes injaPulse {
    0%,100% { transform: scale(1); opacity: .9; }
    50%     { transform: scale(1.2); opacity: 1; }
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-weight: 900; }
.cta-band p  { color: #d8dcff; }

/* Generic glass panel (for content pages) */
.glass-panel {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(167,139,250,.18);
    border-radius: 1.25rem;
    backdrop-filter: blur(14px);
    padding: 1.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Opt-out: keep a card light (public visit-card display) */
body .card.card-light,
body .card.card-light .card-body {
    background: #fff;
    color: #222;
    border: 1px solid rgba(0,0,0,.08);
    backdrop-filter: none;
}
body .card.card-light .text-muted { color: #6c757d !important; }
body .card.card-light h1, body .card.card-light h2,
body .card.card-light h3, body .card.card-light h4,
body .card.card-light h5, body .card.card-light h6 { color: #222; }
body .card.card-light hr { border-color: rgba(0,0,0,.1); }

/* ── Animations ───────────────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
.fade-up.d1 { animation-delay: .15s; }
.fade-up.d2 { animation-delay: .30s; }
.fade-up.d3 { animation-delay: .45s; }
.fade-up.d4 { animation-delay: .60s; }
.fade-up.d5 { animation-delay: .75s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.floaty { animation: floaty 4s ease-in-out infinite; display: inline-block; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.spin-slow { animation: spinSlow 14s linear infinite; display: inline-block; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.tilt { animation: tilt 6s ease-in-out infinite; display: inline-block; }
@keyframes tilt { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }

.pop-in {
    opacity: 0;
    transform: scale(.6);
    animation: popIn .7s cubic-bezier(.18,1.4,.5,1) forwards;
}
@keyframes popIn { to { opacity: 1; transform: scale(1); } }

.caret {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #a78bfa;
    margin-inline-start: 6px;
    vertical-align: -2px;
    animation: caretBlink 1s steps(2,end) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.scroll-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: #a3a8d4;
    font-size: .8rem;
    text-align: center;
    opacity: .8;
    animation: bobble 2.4s ease-in-out infinite;
}
@keyframes bobble { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Layout fixes: neutralize legacy fixed-footer / forced viewport height ── */
body.inja-shell { margin-bottom: 0 !important; }

body.inja-shell .layout-wrapper {
    min-height: auto !important;
    align-items: stretch;
}

body.inja-shell footer.footer {
    position: static !important;
    width: auto;
    line-height: 1.6 !important;
    white-space: normal;
    padding: 1.25rem 0;
    text-align: center;
    margin-top: 2rem;
}

body.inja-shell .layout-content {
    padding-top: 0;
    padding-bottom: 2rem;
}

/* Keep static sidebar from forcing viewport height when content is short */
body.inja-shell .user-sidebar {
    min-height: auto !important;
}