/* ══════════════════════════════════════════
   Elite Creed — Background Illustrations
   Car & Money Scene (Executive Utility)
   Navy · Gold · Charcoal
   ══════════════════════════════════════════ */

/* ── Hero Illustration Layer ── */
body.landing-page {
    position: relative;
    overflow-x: hidden;
    isolation: isolate;
}

body.landing-page::before,
body.landing-page::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.landing-page::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.6px) 0 0 / 240px 240px,
        radial-gradient(circle at 70% 40%, rgba(255, 215, 0, 0.95) 0 1.15px, transparent 1.8px) 0 0 / 320px 320px,
        radial-gradient(circle at 35% 80%, rgba(255, 255, 255, 0.55) 0 0.9px, transparent 1.5px) 0 0 / 180px 180px;
    opacity: 0.3;
    animation: landing-stars-drift 90s linear infinite;
}

body.landing-page::after {
    inset: -18%;
    background:
        radial-gradient(circle, rgba(255, 215, 0, 0.22) 0 1px, transparent 2.6px) 0 0 / 170px 170px,
        radial-gradient(circle, rgba(255, 165, 0, 0.16) 0 1.3px, transparent 3px) 32px 74px / 250px 250px,
        radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 2.4px) 18px 42px / 210px 210px;
    opacity: 0.48;
    filter: blur(0.4px);
    animation: landing-gold-dust 26s linear infinite alternate;
}

.landing-page .landing-container {
    position: relative;
    z-index: 1;
}

.hero,
.why-us,
.feature-section,
.testimonials,
.faq,
.cta-banner {
    position: relative;
    isolation: isolate;
}

.hero::before,
.cta-banner::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    top: 4%;
    right: -10%;
    width: min(46vw, 560px);
    height: min(46vw, 560px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 215, 0, 0.2), transparent 42%),
        radial-gradient(circle at 60% 60%, rgba(255, 165, 0, 0.14), transparent 52%);
    opacity: 0.8;
    filter: blur(6px);
    animation: landing-aura-shift 18s ease-in-out infinite;
}

.cta-banner::after {
    top: 12%;
    right: 6%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.24), transparent 44%),
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.1), transparent 36%);
    opacity: 0.75;
    filter: blur(4px);
    animation: landing-aura-shift 14s ease-in-out infinite reverse;
}

.hero__illustrations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* ── Base Element Style ── */
.illust {
    position: absolute;
    color: var(--color-primary);
    fill: none;
    stroke: currentColor;
    filter: blur(0.4px);
}

.illust text {
    fill: currentColor;
    stroke: none;
}

/* ── Sedan ── */
.illust--sedan {
    width: 500px;
    bottom: 8%;
    left: 32%;
    opacity: 0.055;
    animation: illust-drift 28s ease-in-out infinite;
}

/* ── SUV ── */
.illust--suv {
    width: 420px;
    bottom: 20%;
    left: 12%;
    opacity: 0.04;
    animation: illust-drift 35s ease-in-out infinite reverse;
    animation-delay: 4s;
}

/* ── Money Stack ── */
.illust--money {
    width: 180px;
    top: 22%;
    right: 6%;
    opacity: 0.065;
    animation: illust-drift 24s ease-in-out infinite;
    animation-delay: 2s;
}

/* ── Coins ── */
.illust--coin {
    opacity: 0.05;
    animation: illust-bob 20s ease-in-out infinite;
}

.illust--coin-1 {
    width: 70px;
    top: 18%;
    left: 10%;
}

.illust--coin-2 {
    width: 55px;
    bottom: 28%;
    right: 18%;
    animation-delay: 5s;
}

.illust--coin-3 {
    width: 42px;
    top: 48%;
    left: 55%;
    opacity: 0.035;
    animation-delay: 10s;
}

/* ── Floating Currency Symbols ── */
.illust--naira {
    position: absolute;
    pointer-events: none;
    opacity: 0.03;
    color: var(--color-primary);
    animation: illust-float-up 25s ease-in-out infinite;
    filter: blur(0.3px);
}

.illust--naira svg {
    width: 100%;
    height: 100%;
}

.illust--naira-1 {
    width: 50px;
    height: 50px;
    top: 32%;
    left: 6%;
}

.illust--naira-2 {
    width: 38px;
    height: 38px;
    top: 58%;
    right: 28%;
    animation-delay: 7s;
}

.illust--naira-3 {
    width: 44px;
    height: 44px;
    bottom: 12%;
    left: 45%;
    animation-delay: 14s;
}

/* ── CTA Section Illustrations ── */
.cta-illustrations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.cta-illustrations .illust--sedan {
    width: 320px;
    bottom: auto;
    left: -3%;
    top: 15%;
    opacity: 0.05;
    animation: illust-drift 30s ease-in-out infinite;
}

.cta-illustrations .illust--money {
    width: 130px;
    top: auto;
    right: 4%;
    bottom: 12%;
    opacity: 0.055;
    animation: illust-drift 26s ease-in-out infinite reverse;
}

.cta-illustrations .illust--coin {
    width: 48px;
    opacity: 0.04;
}

.cta-illustrations .illust--coin-1 {
    top: 12%;
    right: 15%;
    left: auto;
    bottom: auto;
}

/* ── Investor Section Accent ── */
.feature-section__illustrations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.feature-section__illustrations .illust--money {
    width: 150px;
    top: auto;
    right: auto;
    left: 3%;
    bottom: 10%;
    opacity: 0.04;
    animation: illust-drift 32s ease-in-out infinite;
}

.feature-section__illustrations .illust--coin {
    width: 50px;
    top: 15%;
    left: auto;
    right: 8%;
    bottom: auto;
    opacity: 0.035;
    animation: illust-bob 22s ease-in-out infinite 3s;
}

/* ══════════════════════════════════════════
   NEW SECTION ILLUSTRATIONS
   ══════════════════════════════════════════ */

/* ── Shared Illustration Container ── */
.how-it-works__illustrations,
.why-us__illustrations,
.agent-section__illustrations,
.testimonials__illustrations,
.faq__illustrations,
.footer__illustrations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.how-it-works,
.testimonials {
    position: relative;
    isolation: isolate;
}

/* ── How It Works — Speedometer ── */
.illust--speedometer {
    width: 140px;
    top: 8%;
    right: 5%;
    opacity: 0.04;
    animation: illust-drift 30s ease-in-out infinite;
}

/* ── How It Works — Road ── */
.illust--road {
    width: 280px;
    bottom: 4%;
    left: 2%;
    opacity: 0.035;
    animation: illust-drift 36s ease-in-out infinite reverse;
    animation-delay: 3s;
}

/* ── How It Works — Steering Wheel ── */
.illust--steering {
    width: 100px;
    bottom: 15%;
    right: 12%;
    opacity: 0.03;
    animation: illust-spin-slow 40s linear infinite;
}

/* ── Why Us — Shield ── */
.illust--shield {
    width: 120px;
    top: 10%;
    left: 4%;
    opacity: 0.04;
    animation: illust-bob 28s ease-in-out infinite;
}

/* ── Why Us — Key ── */
.illust--key {
    width: 160px;
    bottom: 8%;
    right: 5%;
    opacity: 0.035;
    animation: illust-drift 32s ease-in-out infinite;
    animation-delay: 5s;
}

/* ── Why Us — Lock ── */
.illust--lock {
    width: 80px;
    top: 25%;
    right: 18%;
    opacity: 0.03;
    animation: illust-bob 24s ease-in-out infinite;
    animation-delay: 8s;
}

/* ── Agents — Briefcase ── */
.illust--briefcase {
    width: 130px;
    top: 12%;
    right: 4%;
    opacity: 0.04;
    animation: illust-drift 28s ease-in-out infinite;
}

/* ── Agents — Network ── */
.illust--network {
    width: 180px;
    bottom: 6%;
    left: 3%;
    opacity: 0.035;
    animation: illust-pulse 20s ease-in-out infinite;
}

/* ── Agents — Handshake ── */
.illust--handshake {
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.025;
    animation: illust-drift 34s ease-in-out infinite reverse;
    animation-delay: 6s;
}

/* ── Testimonials — Quote Marks ── */
.illust--quote {
    opacity: 0.04;
    animation: illust-bob 26s ease-in-out infinite;
}

.illust--quote-1 {
    width: 100px;
    top: 8%;
    left: 5%;
}

.illust--quote-2 {
    width: 80px;
    bottom: 10%;
    right: 6%;
    animation-delay: 8s;
}

/* ── Testimonials — Stars ── */
.illust--star {
    opacity: 0.035;
    animation: illust-twinkle 18s ease-in-out infinite;
}

.illust--star-1 {
    width: 45px;
    top: 15%;
    right: 12%;
}

.illust--star-2 {
    width: 35px;
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

.illust--star-3 {
    width: 28px;
    top: 50%;
    right: 25%;
    opacity: 0.025;
    animation-delay: 9s;
}

/* ── FAQ — Question Mark ── */
.illust--question {
    opacity: 0.04;
    animation: illust-float-up 22s ease-in-out infinite;
}

.illust--question-1 {
    width: 70px;
    top: 10%;
    right: 6%;
}

.illust--question-2 {
    width: 50px;
    bottom: 12%;
    left: 8%;
    animation-delay: 6s;
}

/* ── FAQ — Document ── */
.illust--document {
    width: 100px;
    top: 20%;
    left: 4%;
    opacity: 0.035;
    animation: illust-drift 30s ease-in-out infinite;
    animation-delay: 3s;
}

/* ── FAQ — Light Bulb ── */
.illust--bulb {
    width: 65px;
    bottom: 8%;
    right: 14%;
    opacity: 0.03;
    animation: illust-bob 22s ease-in-out infinite;
    animation-delay: 7s;
}

/* ── Footer — City Skyline ── */
.illust--skyline {
    width: 100%;
    bottom: 0;
    left: 0;
    height: 80px;
    opacity: 0.04;
    animation: none;
    filter: blur(0.6px);
}

/* ── Footer — Small Car ── */
.illust--footer-car {
    width: 100px;
    bottom: 22px;
    left: 15%;
    opacity: 0.04;
    animation: illust-drive 45s linear infinite;
}

/* ── Animations ── */
@keyframes illust-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10px, -8px);
    }
    50% {
        transform: translate(-5px, -14px);
    }
    75% {
        transform: translate(8px, -5px);
    }
}

@keyframes illust-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
}

@keyframes illust-float-up {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.03;
    }
    50% {
        transform: translateY(-25px) rotate(8deg);
        opacity: 0.05;
    }
}

@keyframes illust-spin-slow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes illust-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.035;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.05;
    }
}

@keyframes illust-twinkle {
    0%, 100% {
        opacity: 0.035;
        transform: scale(1);
    }
    25% {
        opacity: 0.055;
        transform: scale(1.08);
    }
    50% {
        opacity: 0.025;
        transform: scale(0.95);
    }
    75% {
        opacity: 0.05;
        transform: scale(1.04);
    }
}

@keyframes illust-drive {
    0% {
        transform: translateX(-120px);
    }
    100% {
        transform: translateX(calc(100vw + 120px));
    }
}

/* ── Responsive ── */
@keyframes landing-stars-drift {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-120px, 80px, 0);
    }
}

@keyframes landing-gold-dust {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(28px, -18px, 0) scale(1.04);
    }
    100% {
        transform: translate3d(-22px, 20px, 0) scale(0.98);
    }
}

@keyframes landing-aura-shift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-24px, 18px, 0) scale(1.08);
    }
}

@media (max-width: 991.98px) {
    body.landing-page::before {
        opacity: 0.24;
    }

    body.landing-page::after {
        opacity: 0.34;
    }

    .illust--sedan {
        width: 360px;
        opacity: 0.04;
    }
    .illust--suv {
        width: 300px;
        opacity: 0.03;
    }
    .illust--money {
        width: 140px;
    }
    .cta-illustrations .illust--sedan {
        width: 260px;
    }
    .feature-section__illustrations .illust--money {
        width: 120px;
    }

    /* New section illustrations — tablet */
    .illust--speedometer {
        width: 110px;
        opacity: 0.03;
    }
    .illust--road {
        width: 220px;
        opacity: 0.03;
    }
    .illust--shield {
        width: 100px;
    }
    .illust--key {
        width: 130px;
    }
    .illust--network {
        width: 140px;
    }
    .illust--briefcase {
        width: 100px;
    }
    .illust--quote-1 {
        width: 80px;
    }
    .illust--quote-2 {
        width: 60px;
    }
    .illust--document {
        width: 80px;
    }
    .illust--question-1 {
        width: 55px;
    }
}

@media (max-width: 575.98px) {
    .hero::before,
    .cta-banner::after {
        opacity: 0.45;
    }

    .illust--sedan {
        width: 280px;
        opacity: 0.035;
        bottom: 3%;
        left: 10%;
    }
    .illust--suv {
        display: none;
    }
    .illust--money {
        width: 120px;
        opacity: 0.05;
    }
    .illust--coin-2,
    .illust--coin-3,
    .illust--naira-2,
    .illust--naira-3 {
        display: none;
    }
    .cta-illustrations .illust--sedan {
        width: 200px;
        opacity: 0.04;
    }
    .cta-illustrations .illust--money {
        width: 100px;
    }
    .cta-illustrations .illust--coin {
        display: none;
    }
    .feature-section__illustrations {
        display: none;
    }

    /* New section illustrations — mobile: keep only 1-2 per section */
    .illust--road,
    .illust--steering,
    .illust--key,
    .illust--lock,
    .illust--network,
    .illust--handshake,
    .illust--quote-2,
    .illust--star-2,
    .illust--star-3,
    .illust--question-2,
    .illust--bulb,
    .illust--footer-car {
        display: none;
    }
    .illust--speedometer {
        width: 90px;
        opacity: 0.03;
    }
    .illust--shield {
        width: 80px;
        opacity: 0.03;
    }
    .illust--briefcase {
        width: 90px;
        opacity: 0.03;
    }
    .illust--quote-1 {
        width: 60px;
    }
    .illust--question-1 {
        width: 45px;
    }
    .illust--document {
        width: 65px;
    }
    .agent-section__illustrations {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.landing-page::before,
    body.landing-page::after,
    .hero::before,
    .cta-banner::after,
    .illust,
    .illust--naira,
    .illust--speedometer,
    .illust--road,
    .illust--steering,
    .illust--shield,
    .illust--key,
    .illust--lock,
    .illust--briefcase,
    .illust--network,
    .illust--handshake,
    .illust--quote,
    .illust--star,
    .illust--question,
    .illust--document,
    .illust--bulb,
    .illust--footer-car {
        animation: none !important;
    }
}