html, body { height: 100%; margin: 0; }
:root {
    --bg-start: #0b0217;
    --bg-end: #0a0f2b;
    --neon-1: #7C3AED; /* primary purple */
    --neon-2: #06b6d4; /* cyan */
    --neon-3: #22d3ee; /* light cyan */
    --text-muted: #cbd5e1;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-brd: rgba(255, 255, 255, 0.18);
    --shadow-1: 0 10px 30px rgba(0,0,0,.35);
    --radius-lg: 18px;
}

.lp-hero {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(60% 80% at 20% 10%, rgba(124,58,237,.28) 0%, rgba(124,58,237,0) 60%),
                radial-gradient(60% 80% at 80% 20%, rgba(34,211,238,.18) 0%, rgba(34,211,238,0) 60%),
                linear-gradient(180deg, var(--bg-start), var(--bg-end)),
                url('/images/landing-page/banners-1.jpg') center/cover no-repeat;
    overflow: hidden;
    color: #fff;
}

.lp-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70vh;
    background: conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,.25), rgba(6,182,212,.2), rgba(124,58,237,.25));
    filter: blur(80px);
    opacity: .6;
    pointer-events: none;
    transform: rotate(-8deg);
}

.lp-navbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(10px);
    border-radius: 0 0 5px 5px;
    box-shadow: var(--shadow-1);
    margin: 0 auto;
}

.lp-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.lp-nav a {
    color: #e5e7eb;
    text-decoration: none;
    font-weight: 600;
    padding: .4rem .6rem;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.lp-nav a:hover { color: #fff; background: rgba(124,58,237,.12); box-shadow: 0 0 0 1px rgba(124,58,237,.25) inset; }

.lp-right { display: flex; align-items: center; gap: .5rem; }

.lp-admin { position: static; }

.lp-admin a {
    color: #9ca3af;
    font-size: .85rem;
    text-decoration: none;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
}

.hero-inner {
    position: relative;
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem 3.5rem;
    z-index: 1;
}

.container.lp-edge { max-width: 100%; padding-left: 0; padding-right: 0; }

.lp-logo { height: 42px; }

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--text-muted);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-1);
}

/* Floating reference images */
.lp-floats { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-float-img { position: absolute; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,.35); opacity: .9; animation: floatY 6s ease-in-out infinite; will-change: transform; }
.lp-float-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lp-f1 { top: 90px; left: 8%; width: 170px; height: 170px; animation-delay: .2s; }
.lp-f2 { top: 40px; right: 10%; width: 140px; height: 140px; border-radius: 24px; animation-delay: .6s; }
.lp-f3 { bottom: 18%; left: 16%; width: 170px; height: 170px; animation-delay: .9s; }
.lp-f4 { bottom: 22%; right: 16%; width: 150px; height: 210px; border-radius: 24px; animation-delay: .4s; }
.lp-f5 { top: 28%; right: 26%; width: 170px; height: 170px; border-radius: 999px; animation-delay: .1s; }

@keyframes floatY {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-12px) }
}

@media (max-width: 992px) {
    .lp-f1, .lp-f2, .lp-f3, .lp-f4, .lp-f5 { display: none; }
    .lp-title { font-size: 2rem; }
    .lp-cta-group { gap: .75rem; }
}

@media (min-width: 576px) { .lp-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .lp-title { font-size: 2.75rem; } }
@media (min-width: 992px) { .lp-title { font-size: 3.25rem; } }

.lp-sub { color: #d1d5db; margin: 0; line-height: 1.7; }
.lp-cta-group { margin-top: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.btn-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    border: 1px solid rgba(255,255,255,.15);
    background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.22));
    box-shadow: 0 10px 25px rgba(124,58,237,.3), 0 2px 10px rgba(6,182,212,.18) inset;
    backdrop-filter: blur(10px);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-neon:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124,58,237,.42); }

.btn-outline-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #e5e7eb; }

.lp-card { background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-1); color: #e5e7eb; height: 100%; }
.lp-section { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding: 3rem 0; }
.lp-section h3 { color: #fff; font-weight: 800; }
.lp-section p { color: var(--text-muted); }
.lp-footer { padding: 1.25rem 0; color: #a3a3a3; background: rgba(0,0,0,.35); border-top: 1px solid rgba(255,255,255,.08); }
.lp-footer a { color: #cbd5e1; text-decoration: none; }
.lp-footer a:hover { color: #fff; }