/*
 * Home page sections (hero, product, about, mobile app). Loaded only by
 * front/home.blade.php; colours, type, buttons, header, testimonials and
 * footer come from site-modern.css.
 */

/* ---------- Layout ---------- */
.mx-container {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.mx-section {
    padding: 6rem 0;
}
.mx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}

/* ---------- Hero ---------- */
.mx-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(28rem, 72vh, 44rem);
    padding: 5rem 0;
    color: #fff;
    background-color: var(--mx-navy-deep);
    background-image:
        linear-gradient(90deg, rgba(6, 22, 63, .96) 0%, rgba(6, 22, 63, .88) 30%, rgba(6, 22, 63, .35) 58%, rgba(6, 22, 63, 0) 75%),
        var(--mx-hero-img);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    overflow: hidden;
}
.mx-hero-content {
    position: relative;
    z-index: 1;
    max-width: 34rem;
}
.mx-hero-brand,
.mx-hero-brand * {
    margin: 0 0 1rem !important;
    font: 600 .875rem/1 var(--mx-font) !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: var(--mx-aqua) !important;
}
.mx-hero-title {
    margin: 0 0 1.25rem;
    font: 800 clamp(2.5rem, 1.6rem + 3.4vw, 4rem)/1.05 var(--mx-font);
    letter-spacing: -.03em;
    color: #fff;
}
.mx-hero-lead {
    margin: 0 0 2.25rem;
    max-width: 30rem;
    font: 400 1.125rem/1.65 var(--mx-font);
    color: rgba(255, 255, 255, .82);
}
.mx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
}

/* ---------- Product ---------- */
.mx-product-media {
    position: relative;
    border-radius: var(--mx-radius);
    overflow: hidden;
    background: var(--mx-surface);
    box-shadow: var(--mx-shadow-lg);
    aspect-ratio: 1 / 1;
}
.mx-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mx-product-desc h3 {
    margin: 0 0 1.25rem;
    font: 400 1.125rem/1.7 var(--mx-font);
    color: var(--mx-text);
}
.mx-product-desc p {
    margin: 0 0 1rem;
    font: 600 .9375rem/1.5 var(--mx-font);
    color: var(--mx-ink);
}
.mx-product-desc ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem 1.25rem;
    margin: 0 0 2.25rem;
    padding: 0;
    list-style: none;
}
.mx-product-desc li {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.875rem;
    font: 400 .9375rem/1.5 var(--mx-font);
    color: var(--mx-text);
    background: none;
}
.mx-product-desc li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--mx-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231690a9'%3E%3Cpath d='M13.485 3.929a1 1 0 0 1 .086 1.412l-6 7a1 1 0 0 1-1.464.057l-3-3a1 1 0 1 1 1.414-1.414l2.236 2.236 5.316-6.204a1 1 0 0 1 1.412-.087z'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
/* the stored list markup carries its own icon styling; hide it */
.mx-product-desc .vb-product-list li svg,
.mx-product-desc .vb-product-list li img {
    display: none;
}

/* ---------- About ---------- */
.mx-about {
    padding-top: 0;
}
.mx-about-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: center;
    padding: 3.5rem 4rem;
    border-radius: calc(var(--mx-radius) * 1.25);
    background:
        radial-gradient(60rem 30rem at 110% -20%, rgba(44, 234, 224, .18), transparent 60%),
        linear-gradient(135deg, var(--mx-navy) 0%, var(--mx-navy-deep) 100%);
    box-shadow: var(--mx-shadow-lg);
}
.mx-about-head .mx-title {
    margin-bottom: 0;
}
.mx-about-text {
    margin: 0 0 1.75rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--mx-aqua);
}
/* the stored text has Word inline styles (20pt black); normalise them */
.mx-about-text,
.mx-about-text * {
    font: 500 1.25rem/1.6 var(--mx-font) !important;
    color: rgba(255, 255, 255, .92) !important;
}

/* ---------- Mobile app ---------- */
.mx-app {
    background: var(--mx-surface);
    border-top: 1px solid var(--mx-line);
    border-bottom: 1px solid var(--mx-line);
}
.mx-app-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: 3rem;
}
.mx-app-head .mx-title {
    margin-bottom: 0;
}
.mx-app-stores {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.mx-app-stores a {
    display: block;
    border-radius: .625rem;
    transition: transform .2s, box-shadow .2s;
}
.mx-app-stores a:hover {
    transform: translateY(-2px);
    box-shadow: var(--mx-shadow);
}
.mx-app-stores img {
    display: block;
    height: 3.25rem;
    width: auto;
}
.mx-app-gallery.swiper {
    padding: .5rem .25rem 1.5rem;
}
.mx-app-shot {
    padding: .5rem;
    border-radius: 1.75rem;
    background: #fff;
    border: 1px solid var(--mx-line);
    box-shadow: var(--mx-shadow);
}
.mx-app-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.3rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .mx-section {
        padding: 4.5rem 0;
    }
    .mx-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .mx-product-media {
        aspect-ratio: 16 / 10;
    }
    .mx-about-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 2rem;
    }
    .mx-hero {
        background-image:
            linear-gradient(180deg, rgba(6, 22, 63, .55) 0%, rgba(6, 22, 63, .92) 70%),
            var(--mx-hero-img);
        background-position: 70% center;
    }
}
@media (max-width: 575.98px) {
    .mx-container {
        padding: 0 1rem;
    }
    .mx-section {
        padding: 3.5rem 0;
    }
    .mx-hero {
        min-height: 30rem;
        padding: 3.5rem 0;
    }
    .mx-hero-actions .mx-btn {
        flex: 1 1 100%;
    }
    .mx-product-desc ul {
        grid-template-columns: 1fr;
    }
    .mx-about-card {
        padding: 2rem 1.25rem;
        border-radius: var(--mx-radius);
    }
    .mx-about-text,
    .mx-about-text * {
        font-size: 1.0625rem !important;
    }
    .mx-app-stores img {
        height: 2.75rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mx-app-stores a {
        transition: none;
    }
    .mx-app-stores a:hover {
        transform: none;
    }
}