.flash-beacon {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor; /* inherits from text-* class */
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
    flex: 0 0 14px;
}

.flash-beacon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
    animation: beacon-ping 1.2s ease-out infinite;
}

.flash-beacon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    transform: translate(-50%,-50%) scale(.6);
    opacity: 0;
    animation: beacon-ring 1.2s ease-out infinite;
}

@keyframes beacon-ping {
    0% {
        transform: scale(1);
        opacity: .9
    }

    70% {
        transform: scale(1.9);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes beacon-ring {
    0% {
        opacity: 0
    }

    30% {
        opacity: .35
    }

    100% {
        transform: translate(-50%,-50%) scale(2.2);
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash-beacon::before, .flash-beacon::after {
        animation: none;
        opacity: 1;
    }
}

.belt-map-btn {
    width: 320px;
    height: 120px;
    background: linear-gradient(135deg, #0d6efd, #0049b8); /* modern gradient */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-left: 6px solid #fff;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.25s ease-in-out;
    text-decoration: none;
}

    .belt-map-btn:hover {
        background: linear-gradient(135deg, #0049b8, #003a94);
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        text-decoration: none;
    }

    .belt-map-btn .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .belt-map-btn .icon svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
/* how many are visible per view */
.module-stepper {
    --gap: 1.5rem;
    --per-view: 3;
    --speed: 700ms;
}

@media (max-width: 991.98px) {
    .module-stepper {
        --per-view: 2;
    }
}

@media (max-width: 575.98px) {
    .module-stepper {
        --per-view: 1;
    }
}

.module-stepper {
    overflow: hidden;
}

    .module-stepper .stepper-track {
        display: flex;
        gap: var(--gap);
        will-change: transform;
        transition: transform var(--speed) ease;
    }
    /* exact Bootstrap-like widths: 3/2/1 across with gaps accounted for */
    .module-stepper .stepper-item {
        flex: 0 0 calc( (100% - (var(--gap) * (var(--per-view) - 1)) ) / var(--per-view) );
    }

/* keep your backgrounds tidy */
.card-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Remove all shadows & borders inside the stepper/scroller */
#moduleStepper .card,
.module-scroller .card { /* include scroller version if you tried that */
    box-shadow: none !important; /* overrides .shadow-lg */
    border: 0 !important; /* overrides default card border */
}

/* If you previously added edge fades, disable them here */
.module-scroller::before,
.module-scroller::after {
    display: none !important;
}

.hero-card {
    /* background image comes from inline style */
    background-size: cover;
    background-position: center;
    min-height: 320px; /* adjust height */
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
    /* gradient overlay for text legibility */
    .hero-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 85%);
    }

    .hero-card .card-body {
        z-index: 1;
    }
/* keep text above overlay */
@media (max-width: 575.98px) {
    .hero-card {
        min-height: 280px;
    }
}


.no-trans {
    transform: scale(1) !important;
    transition: none !important;
    border: none !important;
}
/* ===== Quatrain Sections (compact, no card panel) ===== */
.q-sections {
    --q-brand: #2563eb;
    --q-brand2: #06b6d4;
    --q-band: #f6f8fb; /* gray band */
    --q-band-alt: #eef2f7; /* alt gray band */
    --q-stroke: #e6ebf1;
    --q-ring: rgba(37,99,235,.22);
    color: #0f172a;
}

    /* Gray bands only (no white card) */
    .q-sections .q-band {
        background: var(--q-band);
        box-shadow: inset 0 1px 0 var(--q-stroke), inset 0 -1px 0 var(--q-stroke);
    }

        .q-sections .q-band.q-alt {
            background: var(--q-band-alt);
        }

    /* Tighter vertical rhythm */
    .q-sections .q-inner {
        padding: 48px 0;
    }

@media (min-width:992px) {
    .q-sections .q-inner {
        padding: 64px 0;
    }
}

/* Row/gutter + side-by-side from md+ */
.q-sections .q-row {
    align-items: center;
}

/* Media block (adds subtle lift so it still feels designed) */
.q-sections .q-media-figure {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f7;
    box-shadow: 0 0 0 6px rgba(255,255,255,.65), /* soft white ring */
    0 8px 24px rgba(2,6,23,.10); /* drop shadow */
}

    .q-sections .q-media-figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Type + CTA (unchanged) */
.q-sections .q-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

    .q-sections .q-kicker .chip {
        font-weight: 700;
        color: var(--q-brand);
    }

.q-sections .q-title {
    margin: .25rem 0 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(28px,3vw,44px);
}

.q-sections .q-lead {
    color: #334155;
    line-height: 1.6;
    font-size: clamp(18px,1.4vw,20px);
}

.q-sections .btn-gradient {
    background: linear-gradient(90deg,var(--q-brand),var(--q-brand2));
    border: none;
    color: #fff;
    border-radius: .6rem;
}

    .q-sections .btn-gradient:hover {
        filter: brightness(1.06);
    }

/* ===== FINAL MOBILE FIX (drop at end of your CSS) ===== */

/* Tighten section spacing and gutters */
.q-sections .q-inner {
    padding: 36px 0 !important;
}

@media (max-width: 575.98px) {
    .q-sections .q-inner {
        padding: 24px 0 !important;
    }

    .q-sections .q-row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: .5rem;
    }

    .ca-img {
        transform: scale(.7);
        margin: 0px;
        padding: 0px;
    }

    .order-2 {
        padding-left: 25px;
        padding-right: 25px;
    }

    /* Headline & text scale */
    .q-sections .q-title {
        font-size: 1.55rem !important;
        margin-bottom: .5rem !important;
    }

    .q-sections .q-lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-bottom: .75rem !important;
    }

    /* Button sizing */
    .q-sections .btn-gradient.btn-lg {
        padding: .55rem .9rem !important;
        font-size: 1rem !important;
        border-radius: .5rem !important;
    }

    /* Kill the white ring + heavy shadow around images on phones */
    .q-sections .q-media-figure {
        border-radius: 12px !important;
        box-shadow: none !important; /* <- removes the white ring/drop-shadow */
        margin-top: .5rem !important;
        aspect-ratio: auto !important; /* let height flow naturally */
    }

        .q-sections .q-media-figure img {
            width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
            display: block !important;
        }

    /* Softer band divider so the edge doesn’t look “boxed” */
    .q-sections .q-band {
        box-shadow: none !important;
        background: #f6f8fb !important;
        border-top: 1px solid rgba(230,235,241,.6) !important;
        border-bottom: 1px solid rgba(230,235,241,.6) !important;
    }
}

/* Tablets: lighter ring, moderate spacing */
@media (min-width:576px) and (max-width:991.98px) {
    .q-sections .q-inner {
        padding: 48px 0 !important;
    }

    .q-sections .q-media-figure {
        border-radius: 14px !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 6px 18px rgba(2,6,23,.10) !important;
        aspect-ratio: 16/10 !important;
    }
}

/* Desktops: original look */
@media (min-width:992px) {
    .q-sections .q-inner {
        padding: 56px 0 !important;
    }
    /* a bit tighter than before */
    .q-sections .q-media-figure {
        box-shadow: 0 0 0 6px rgba(255,255,255,.65), 0 8px 24px rgba(2,6,23,.10) !important;
        aspect-ratio: 16/10 !important;
    }
}

.car-hig {
    height: 200px !important;
}

.m-zero {
    margin-bottom: 0px !important;
}


/* Layout variables */
.solutions-stepper {
    --cols: 3; /* always show 3 */
    --gap: 1rem;
    --speed: 700ms; /* animation speed */
    position: relative;
    margin: 1rem 0;
}

    /* viewport & track */
    .solutions-stepper .stepper-viewport {
        overflow: hidden;
    }

    .solutions-stepper .stepper-track {
        display: flex;
        gap: var(--gap);
        transition: transform var(--speed) ease;
        will-change: transform;
    }

    /* items: width = 1/3 minus the gaps */
    .solutions-stepper .stepper-item {
        flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
        max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    }

    /* arrows pinned to midline */
    .solutions-stepper .stepper-prev,
    .solutions-stepper .stepper-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 9999px;
        border: 0;
        background: #fff;
        color: #334155;
        box-shadow: 0 6px 18px rgba(2,6,23,.15);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
    }

    .solutions-stepper .stepper-prev {
        left: -22px;
    }

    .solutions-stepper .stepper-next {
        right: -22px;
    }

        .solutions-stepper .stepper-prev:hover,
        .solutions-stepper .stepper-next:hover {
            filter: brightness(1.05);
        }

/* card look (icon inline) */
.solution-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    border-radius: 16px;
    padding: 18px 20px;
    min-height: 148px; /* room for copy */
    border: 1px solid #e6ebf1;
    box-shadow: 0 6px 18px rgba(2,6,23,.06);
    color: #0f172a;
    background: #fff;
}

.solution-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.08);
    color: #0f172a;
    font-size: 24px;
}

.solution-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: 1.8rem;
    line-height: 1.2;
}

.solution-sub {
    margin: 4px 0 0;
    font-size: 1rem;
    line-height: 1.45;
    color: #475569;
}

/* LIGHT professional palette for the whole card (with a stronger icon badge) */
.sc-sky {
    background: linear-gradient(135deg,#eef5ff,#e4efff);
}

    .sc-sky .solution-icon {
        background: #2f6fe4;
        color: #fff;
    }

.sc-mint {
    background: linear-gradient(135deg,#e9f8f5,#dcf3ef);
}

    .sc-mint .solution-icon {
        background: #1e7d74;
        color: #fff;
    }

.sc-sand {
    background: linear-gradient(135deg,#fff6e8,#ffedd2);
}

    .sc-sand .solution-icon {
        background: #b86618;
        color: #fff;
    }

.sc-lilac {
    background: linear-gradient(135deg,#f3edff,#ece4ff);
}

    .sc-lilac .solution-icon {
        background: #6b4fd6;
        color: #fff;
    }

.sc-olive {
    background: linear-gradient(135deg,#f0f6ea,#e5f0da);
}

    .sc-olive .solution-icon {
        background: #567c2c;
        color: #fff;
    }

.sc-rose {
    background: linear-gradient(135deg,#ffeaf1,#ffdbe6);
}

    .sc-rose .solution-icon {
        background: #c23e6b;
        color: #fff;
    }

.sc-slate {
    background: linear-gradient(135deg,#f2f5f8,#ebeff3);
}

    .sc-slate .solution-icon {
        background: #425b76;
        color: #fff;
    }

.sc-aqua {
    background: linear-gradient(135deg,#e9fbff,#dff6fc);
}

    .sc-aqua .solution-icon {
        background: #1e90a8;
        color: #fff;
    }

/* small screens: keep 3 across as requested; tweak height/padding for fit */
@media (max-width: 575.98px) {
    .solution-card {
        min-height: 132px;
        padding: 16px;
        border-radius: 14px;
    }

    .solution-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 22px;
    }

    .solution-title {
        font-size: 2.06rem;
    }

    .solution-sub {
        font-size: 1rem;
    }

    .solutions-stepper .stepper-prev {
        left: -10px;
    }

    .solutions-stepper .stepper-next {
        right: -10px;
    }
}
/* --- responsive columns for the stepper --- */
.solutions-stepper {
    --cols: 1;
    --gap: 1rem;
}
/* phones: 1 */
@media (min-width:576px) {
    .solutions-stepper {
        --cols: 2;
    }
}
/* tablets: 2 */
@media (min-width:992px) {
    .solutions-stepper {
        --cols: 3;
    }
}
/* desktop: 3 */

/* stepper item width uses --cols (already in your CSS):
   .solutions-stepper .stepper-item{
     flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
     max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
   } */

/* card comfort */
.solution-card {
    min-height: 148px;
}

@media (min-width:992px) {
    .solution-card {
        min-height: 160px;
    }
}

/* phones: prevent squish by stacking icon above text */
/* Phones: keep ICON + TITLE inline, just scale things down a bit */
@media (max-width:575.98px) {
    /* do NOT change flex-direction; the header row stays inline */
    .solution-card {
        padding: 14px 16px;
        min-height: 150px;
        border-radius: 14px;
        gap: 10px; /* space between header and subtext */
    }

    /* icon + title row must stay inline */
    .solution-head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .solution-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
        background: rgba(15,23,42,.10); /* subtle on light cards */
    }

    .solution-title {
        font-size: 1.7rem; /* was 2.06rem (too big) */
        line-height: 1.2;
        margin: 0;
    }

    .solution-sub {
        font-size: .95rem;
    }

    /* smaller arrows, tucked in a bit */
    .solutions-stepper .stepper-prev,
    .solutions-stepper .stepper-next {
        width: 34px;
        height: 34px;
    }

    .solutions-stepper .stepper-prev {
        left: 6px;
    }

    .solutions-stepper .stepper-next {
        right: 6px;
    }
}

/* tablets: inline icon ok, keep good height */
@media (min-width:576px) and (max-width:991.98px) {
    .solution-card {
        min-height: 150px;
    }
}