/* public/assets/css/landing.css */

/* Scoped to this landing page only. Premium FinTech SaaS Identity. */
body {
    background-color: #040914; /* Deep space navy from reference */
    color: #f8fafc;
}

/* Faint technical grid background */
.lp-grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 80%);
}

/* Massive Planetary Orb from Reference */
.hero-orb {
    position: absolute;
    top: 45vh;
    left: 50%;
    transform: translateX(-50%);
    width: 140vw;
    height: 1000px;
    background: radial-gradient(ellipse at top, rgba(37, 99, 235, 0.15) 0%, rgba(4, 9, 20, 0) 70%);
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 100%;
    box-shadow: 0 -40px 100px rgba(37, 99, 235, 0.2);
    pointer-events: none;
    z-index: 0;
}

/* Premium Glassmorphism Surfaces */
.glass-panel {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Floating Animations for Dashboard Preview */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes float-med {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
@keyframes float-fast {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.anim-float-slow { animation: float-slow 6s ease-in-out infinite; }
.anim-float-med { animation: float-med 5s ease-in-out infinite; }
.anim-float-fast { animation: float-fast 4s ease-in-out infinite; }

/* Existing Logo Animation Preserved */
@keyframes lp-line-expand {
    0% { width: 0; opacity: 1; }
    60% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}
@keyframes lp-logo-reveal {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
}
.lp-logo-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.95), transparent);
    transform: translate(-50%, -50%);
    animation: lp-line-expand 650ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.lp-logo-img {
    opacity: 0;
    transform: scale(0.82);
    animation: lp-logo-reveal 450ms ease-out 520ms forwards;
}

/* Scroll-reveal */
html.lp-js .lp-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.lp-js .lp-reveal.lp-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .anim-float-slow, .anim-float-med, .anim-float-fast, .lp-logo-line, .lp-logo-img {
        animation: none !important;
    }
    .lp-logo-img { opacity: 1; transform: none; }
    .lp-logo-line { display: none; }
    html.lp-js .lp-reveal { opacity: 1; transform: none; transition: none; }
    * { transition-duration: 1ms !important; }
}

html.theme-light body { background-color: #f4f7f6; color: #17231f; }
html.theme-light #site-header.bg-\[\#040914\]\/90 {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: #d7e1dd !important;
}
html.theme-light #site-header.bg-\[\#040914\]\/90 .text-slate-100,
html.theme-light #site-header.bg-\[\#040914\]\/90 .text-slate-300 { color: #17231f !important; }
html.theme-light .lp-hero { background-color: #f4f7f6; }
html.theme-light .lp-hero-glow { background-color: rgba(16, 185, 129, 0.08) !important; }
html.theme-light .lp-grid-bg {
    background-image:
        linear-gradient(rgba(23, 35, 31, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 35, 31, 0.04) 1px, transparent 1px);
}
html.theme-light .hero-orb {
    background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.12) 0%, rgba(244, 247, 246, 0) 70%);
    border-top-color: rgba(16, 185, 129, 0.24);
    box-shadow: 0 -40px 100px rgba(16, 185, 129, 0.12);
}
html.theme-light .glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(238, 243, 241, 0.92) 100%);
    border-color: rgba(91, 109, 102, 0.2);
    box-shadow: 0 20px 40px -10px rgba(23, 35, 31, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-light .glass-panel:hover { border-color: rgba(5, 150, 105, 0.35); }
html.theme-light .lp-showcase .glass-panel { color: #17231f; }
html.theme-light .lp-showcase .bg-slate-700 { background-color: #cbd8d2 !important; }
html.theme-light .lp-showcase .bg-slate-800\/50 { background-color: rgba(238, 243, 241, 0.9) !important; }
html.theme-light .lp-how-it-works { background-color: #eef3f1; border-top: 1px solid #d7e1dd; border-bottom: 1px solid #d7e1dd; }
html.theme-light .lp-how-it-works .bg-\[\#040914\] { background-color: #ffffff !important; }
html.theme-light .lp-how-it-works .bg-gradient-to-r { background-image: linear-gradient(to right, transparent, #b8c9c1, transparent) !important; }
html.theme-light .lp-about-section { background-color: #f4f7f6 !important; border-top-color: #d7e1dd; }
html.theme-light .lp-about-section #about {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 243, 241, 0.96) 100%);
    border-color: rgba(91, 109, 102, 0.2);
}
html.theme-light .lp-about-section .bg-blue-500\/10 { background-color: rgba(16, 185, 129, 0.08) !important; }
html.theme-light .lp-system-status {
    background-color: rgba(238, 243, 241, 0.9) !important;
    border-top-color: #d7e1dd;
    border-bottom-color: #d7e1dd;
}
html.theme-light .lp-final-cta { background-color: #f4f7f6; }
html.theme-light .lp-final-cta-glow { background-color: rgba(16, 185, 129, 0.08) !important; }