/* Landing page styles that reuse your defined variables in site.css */
:root {
    /* fallback if globals not loaded before this file */
    --c01: #68bbbb;
    --c02: #ffffff;
    --c09: #25262b;
}

/* Keep styling minimal and rely on Bootstrap 5.3 for layout */
.mc-landing {
    font-family: var(--bs-body-font-family), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: var(--c09);
}

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(104,187,187,0.04), rgba(255,255,255,0.02));
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-image: url("/Images/mobicycle-login.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    filter: saturate(0.7) blur(.2px);
    pointer-events: none;
    z-index: -1;
}

.mc-logo {
    max-width: 280px;
}

.display-6 {
    color: var(--c09);
}

/* Icon color */
.text-icon {
    color: var(--c01);
}

/* App screenshot */
.app-screenshot {
    width: 320px;
    max-width: 80%;
    border-radius: 1rem;
    border: 6px solid rgba(255,255,255,0.6);
}

/* Badge tweak */
.badge.position-absolute {
    font-size: .6rem;
    padding: .35rem .5rem;
}

/* Make CTA buttons more usable on small devices */
@media (max-width: 575.98px) {
    .btn-lg {
        padding-top: .6rem;
        padding-bottom: .6rem;
        font-size: 1rem;
    }
    .mc-logo {
        max-width: 200px;
    }
}

/* Reduce custom visuals; prefer Bootstrap consistency */