:root{
    --ngi-teal:#176f70;
    --ngi-teal-deep:#11585a;
    --ngi-orange:#f7941d;
    --ngi-char:#171b1d;
    --ngi-cool:#f2f5f5;
    --ngi-pale-teal:#eaf3f3;
    --ngi-line:#dbe3e3;
    --ngi-radius:14px;
}

/* Navbar: same family as the solid teal hero, translucent rather than a separate dark strip */
.ngi-header{
    background:rgba(23,111,112,.78)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.ngi-header-inner{height:82px!important}
.ngi-brand{gap:0!important}
.ngi-brand-logo{
    width:auto!important;
    height:60px!important;
    max-width:275px!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.ngi-nav{gap:21px!important}
.ngi-nav a{position:relative;color:#eef8f7!important}
.ngi-nav a:not(.ngi-nav-cta):after{
    content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--ngi-orange);transition:width .18s ease
}
.ngi-nav a:not(.ngi-nav-cta):hover:after,.ngi-nav a.active:not(.ngi-nav-cta):after{width:100%}
.ngi-nav .active{color:#fff!important}
.ngi-nav-cta{
    background:var(--ngi-orange)!important;
    color:#fff!important;
    border-radius:999px!important;
    padding:11px 17px!important;
}
.ngi-mobile{font-size:22px!important}

/* Hero: one solid teal field; no gradient overlay */
.ngi-hero{
    background:var(--ngi-teal)!important;
}
.ngi-hero-media img{
    opacity:.20!important;
    filter:saturate(.72) contrast(.95)!important;
}
.ngi-hero-media:after{
    background:rgba(23,111,112,.64)!important;
}
.ngi-kicker{color:#c8eeee!important}
.ngi-title{font-size:clamp(58px,8.5vw,116px)!important}
.ngi-lead{color:#eff8f7!important}
.ngi-float{
    border-radius:var(--ngi-radius)!important;
    transform:none!important;
    box-shadow:0 18px 45px rgba(7,37,38,.18)!important;
}
.ngi-float.one{background:rgba(255,255,255,.96)!important}
.ngi-float.two{background:rgba(14,94,93,.96)!important}
.ngi-float.three{background:var(--ngi-orange)!important}
.ngi-float svg{stroke:currentColor!important}

/* Normal cards: square-ish but not harsh */
.ngi-card,.ngi-step{
    border-radius:var(--ngi-radius)!important;
}
.ngi-card{
    box-shadow:0 8px 22px rgba(10,33,34,.07)!important;
}
.ngi-icon{
    border-radius:12px!important;
}
.ngi-card .ngi-icon,
.ngi-network-card .ngi-icon{
    width:46px!important;height:46px!important;
    border:1px solid rgba(247,148,29,.42)!important;
    background:#fff!important;
    color:var(--ngi-orange)!important;
}

/* Cool surfaces only */
.ngi-sand{background:var(--ngi-cool)!important}
.ngi-mist{background:var(--ngi-pale-teal)!important}
.ngi-teal{background:var(--ngi-teal-deep)!important}
.ngi-teal .ngi-kicker{color:#c8eeee!important}

/* Mela Shopper order journey: compact, characterful nodes */
.ngi-journey{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
    margin-top:30px!important;
}
.ngi-step{
    aspect-ratio:auto!important;
    min-height:188px!important;
    padding:18px!important;
    position:relative!important;
    background:#fff!important;
    border:1px solid var(--ngi-line)!important;
    box-shadow:0 8px 20px rgba(10,33,34,.06)!important;
}
.ngi-step:after{display:none!important}
.ngi-step > svg{
    width:42px!important;height:42px!important;
    padding:9px!important;
    border-radius:12px!important;
    border:1px solid rgba(247,148,29,.45)!important;
    color:var(--ngi-orange)!important;
    background:#fff!important;
    margin-bottom:14px!important;
}
.ngi-step b{font-size:15px!important;line-height:1.25!important}
.ngi-step span{font-size:12px!important;line-height:1.55!important;margin-top:8px!important}

/* Status is status, not a pill-button */
.ngi-status{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:0!important;
    margin-bottom:12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    font-size:10px!important;
    letter-spacing:.1em!important;
}
.ngi-status:before{
    content:"";width:7px;height:7px;border-radius:50%;background:#899594;flex:0 0 auto
}
.ngi-status.live{color:#17653a!important}
.ngi-status.live:before{background:#2f8450!important}
.ngi-status.activating{color:#9f5807!important}
.ngi-status.activating:before{background:var(--ngi-orange)!important}
.ngi-status.soon{color:#56615f!important}
.ngi-status.soon:before{background:#8e9998!important}

/* FAQ = locked Shopper landing visual pattern */
.ngi-faq-section{background:#fff!important}
.ngi-faqcats{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}
.ngi-faqcats button{
    border:1px solid #ccc;background:#fff;border-radius:999px;padding:9px 14px;
    font:600 11px Inter,Arial,sans-serif;color:#1a1f20;cursor:pointer
}
.ngi-faqcats button.active{background:var(--ngi-char);color:#fff;border-color:var(--ngi-char)}
.ngi-qa{border-top:1px solid #ddd}
.ngi-q{
    width:100%;border:0;background:#fff;display:flex;align-items:center;justify-content:space-between;
    gap:18px;text-align:left;padding:18px 0;font:600 14px Inter,Arial,sans-serif;color:#1a1f20;cursor:pointer
}
.ngi-q i{transition:transform .18s ease;font-size:12px;color:#777}
.ngi-a{display:none;color:#666;line-height:1.65;padding:0 0 18px;font-size:13px}
.ngi-qa.open .ngi-a{display:block}
.ngi-qa.open .ngi-q i{transform:rotate(180deg)}
.ngi-btn-dark{background:var(--ngi-char)!important;color:#fff!important;border-radius:999px!important}

/* Footer: unframed authoritative logo, modestly compressed */
.ngi-footer{padding:40px 0 24px!important;background:#090d0e!important}
.ngi-footer-brand{display:inline-flex!important}
.ngi-footer-brand img{
    width:auto!important;height:58px!important;max-width:290px!important;object-fit:contain!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
.ngi-footer-copy{color:#829491;max-width:420px;line-height:1.6}
.ngi-footer-bottom{margin-top:24px!important;padding-top:16px!important}

@media(max-width:980px){
    .ngi-header-inner{height:78px!important}
    .ngi-brand-logo{height:55px!important;max-width:235px!important}

    /* restore simple working mobile shelf; same teal as navbar */
    .ngi-nav{
        display:none!important;
        position:absolute!important;
        top:78px!important;
        left:0!important;
        right:0!important;
        background:rgba(23,111,112,.98)!important;
        border:0!important;
        border-radius:0!important;
        padding:16px 22px 20px!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:0!important;
        box-shadow:0 18px 32px rgba(0,0,0,.16)!important;
    }
    .ngi-nav.open{display:flex!important}
    .ngi-nav a{
        padding:13px 0!important;
        border-bottom:1px solid rgba(255,255,255,.12)!important;
        color:#fff!important;
    }
    .ngi-nav a:last-child{border-bottom:0!important}
    .ngi-nav a:after{display:none!important}
    .ngi-nav-cta{
        background:transparent!important;
        padding:13px 0!important;
        border-radius:0!important;
        color:#fff!important;
    }
    .ngi-mobile{display:block!important}

    .ngi-hero-content{grid-template-columns:1fr!important}
    .ngi-hero-cards{
        min-height:auto!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        padding:6px 0 4px!important;
    }
    /* stacked one behind another tightly, no diagonal spread, and never over hero copy */
    .ngi-float{
        position:relative!important;
        inset:auto!important;
        width:min(92%,390px)!important;
        margin:0 auto!important;
        padding:19px!important;
        transform:none!important;
    }
    .ngi-float + .ngi-float{margin-top:-14px!important}
    .ngi-float.one{z-index:3!important}
    .ngi-float.two{z-index:2!important}
    .ngi-float.three{z-index:1!important}
    .ngi-float h3{font-size:21px!important}

    .ngi-journey{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
    .ngi-step{min-height:178px!important}
    .ngi-step:last-child{
        grid-column:1/-1!important;
        width:calc(50% - 6px)!important;
        justify-self:center!important;
    }
}
@media(max-width:620px){
    .ngi-wrap{width:min(100% - 26px,1180px)!important}
    .ngi-header-inner{height:74px!important}
    .ngi-brand-logo{height:50px!important;max-width:205px!important}
    .ngi-nav{top:74px!important}
    .ngi-hero-content{padding:66px 0 48px!important;gap:26px!important}
    .ngi-title{
        font-size:clamp(52px,15vw,74px)!important;
        line-height:.88!important;
        letter-spacing:-.055em!important;
    }
    .ngi-lead{font-size:17px!important}
    .ngi-hero-cards{margin-top:4px!important}
    .ngi-float{width:94%!important;padding:17px!important}
    .ngi-float + .ngi-float{margin-top:-12px!important}
    .ngi-float h3{font-size:19px!important}
    .ngi-float p{font-size:12px!important}

    .ngi-journey{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
    .ngi-step{min-height:164px!important;padding:14px!important;border-radius:12px!important}
    .ngi-step > svg{width:38px!important;height:38px!important;padding:8px!important;border-radius:11px!important;margin-bottom:11px!important}
    .ngi-step b{font-size:13px!important}
    .ngi-step span{font-size:10.5px!important;line-height:1.45!important}
    .ngi-step:last-child{width:calc(50% - 5px)!important}

    .ngi-card{border-radius:12px!important}
    .ngi-icon{border-radius:11px!important}

    .ngi-faqcats{gap:8px!important}
    .ngi-faqcats button{padding:8px 12px!important;font-size:10px!important}
    .ngi-q{font-size:14px!important;padding:17px 0!important}
    .ngi-a{font-size:12.5px!important}
    .ngi-footer-brand img{height:52px!important;max-width:245px!important}
}

/* ONLY the three requested corrections */
.ngi-hero{background:#11585a!important}
.ngi-hero-media:after{background:rgba(17,88,90,.66)!important}
.ngi-title,.ngi-lead{color:#fff!important}

.ngi-section:not(.ngi-teal):not(.ngi-dark) .ngi-kicker,
.ngi-float.one .ngi-kicker{color:#176f70!important}
.ngi-section:not(.ngi-teal):not(.ngi-dark) .ngi-kicker{font-weight:900!important}

.ngi-float{
    aspect-ratio:1/1!important;
    width:245px!important;
    min-height:0!important;
    padding:22px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important
}
.ngi-hero-cards{min-height:430px!important}
.ngi-float.one{top:18px!important;left:18px!important;transform:rotate(-2deg)!important}
.ngi-float.two{top:138px!important;right:20px!important;transform:rotate(2deg)!important}
.ngi-float.three{bottom:12px!important;left:86px!important;transform:rotate(-1deg)!important}

@media(max-width:980px){
    .ngi-hero-cards{
        min-height:360px!important;
        display:block!important;
        position:relative!important;
        width:min(100%,420px)!important;
        margin:6px auto 0!important;
        padding:0!important
    }
    .ngi-float{
        position:absolute!important;
        width:210px!important;
        aspect-ratio:1/1!important;
        margin:0!important;
        padding:18px!important
    }
    .ngi-float.one{top:0!important;left:8px!important;right:auto!important;bottom:auto!important;transform:rotate(-2deg)!important;z-index:3!important}
    .ngi-float.two{top:72px!important;right:8px!important;left:auto!important;bottom:auto!important;transform:rotate(2deg)!important;z-index:2!important}
    .ngi-float.three{top:144px!important;left:76px!important;right:auto!important;bottom:auto!important;transform:rotate(-1deg)!important;z-index:1!important}
    .ngi-float + .ngi-float{margin-top:0!important}
}
@media(max-width:620px){
    .ngi-hero-cards{min-height:334px!important;width:100%!important;max-width:350px!important}
    .ngi-float{width:190px!important;padding:16px!important}
    .ngi-float.one{top:0!important;left:0!important}
    .ngi-float.two{top:64px!important;right:0!important}
    .ngi-float.three{top:128px!important;left:64px!important}
    .ngi-float h3{font-size:18px!important}
    .ngi-float p{font-size:11.5px!important;line-height:1.45!important}
}