/*
=========================================================
MANOMAY INDUSTRIAL INTELLIGENCE PLATFORM
Public landing page
=========================================================
*/

:root {
    --blue: #007cc1;
    --blue2: #13668c;
    --red: #c01717;
    --ink: #4d4d4d;
    --muted: #6f7d86;
    --line: #dce6eb;
    --soft: #f4f8fa;
    --green: #548235;
    --shadow: 0 18px 55px rgba(31,65,82,.10);
}

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: #fff;
    color: var(--ink);

}

a {
    text-decoration: none;
}

.container {
    max-width: 1240px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

.navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(220,230,235,.85);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
}

.navbar {
    min-height: 82px;
}

.brand-lockup,
.brand-main {
    display: flex;
}

.brand-lockup {
    align-items: center;
}

.brand-main {
    flex-direction: column;
    align-items: flex-start;
}

.brand-wordmark {
    display: block;
    width: auto;
    height: 53px;
}

.brand-slogan {
    position: relative;
    top: -7px;
    display: block;
    margin-left: 2px;
    color: #6f7d86;
    font-size: .56rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nav-link {
    padding: .65rem .75rem !important;
    color: var(--ink) !important;
    font-size: .9rem;
    font-weight: 700;
}

.nav-link:hover {
    color: var(--blue) !important;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    background: url("/images/logo/icon-manomay-round.png") center / contain no-repeat;
}

/* ---------------------------------------------------------
   SHARED ELEMENTS
--------------------------------------------------------- */

.eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--blue2);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.eyebrow::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--red);
}

.blue {
    color: var(--blue2);
}

.section {
    padding: 96px 0;
}

.soft {
    background: var(--soft);
}

.title {
    margin: 0;
    color: #394f5a;
    font-size: clamp(2.2rem,4.2vw,3.7rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 700;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.01rem;
    line-height: 1.78;
	margin-top: 25px;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.35rem;
    border: 1px solid var(--blue);
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 8px 22px rgba(0,124,193,.18);
    color: #fff !important;
    font-weight: 800;
    transition: .2s;
}

.btn-main::after {
    content: "→";
}

.btn-main:hover {
    transform: translateY(-1px);
    border-color: var(--blue2);
    background: var(--blue2);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: .72rem 1.35rem;
    border: 1px solid #c8d6de;
    border-radius: 999px;
    background: #fff;
    color: var(--blue2) !important;
    font-weight: 800;
    transition: .2s;
}

.btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue) !important;
}

.btn-white {
    display: inline-flex;
    align-items: center;
    padding: .8rem 1.45rem;
    border-radius: 999px;
    background: #fff;
    color: var(--blue2) !important;
    font-weight: 700;
}

.platform-section-heading {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 52px;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.platform-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 95px;
    background:
        radial-gradient(circle at 78% 22%,rgba(0,124,193,.09),transparent 28%),
        linear-gradient(180deg,#fff 0%,#f7fbfd 100%);
}

.platform-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(rgba(19,102,140,.055) 1px, transparent 1px),
        linear-gradient(90deg,rgba(19,102,140,.055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);
}

.platform-hero h1 {
    max-width: 650px;
    margin: 0 0 26px;
    color: #314954;
    font-size: clamp(3.25rem,5.3vw,5.25rem);
    line-height: .96;
    letter-spacing: -.062em;
    font-weight: 700;
}

.platform-hero-copy {
    max-width: 590px;
    margin-bottom: 28px;
    color: #60727c;
    font-size: 1.04rem;
    line-height: 1.78;
}

.platform-hero-footnote {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
    color: #7b8b93;
    font-size: .72rem;
    font-weight: 800;
}

.platform-hero-footnote span {
    position: relative;
    padding-right: 16px;
}

.platform-hero-footnote span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #b7c6ce;
}

.platform-screen-wrap {
    overflow: hidden;
    border: 1px solid #cfdee6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(32,72,93,.16);
    transform: perspective(1300px) rotateY(-2deg) rotateX(1deg);
    transform-origin: center;
}

.platform-screen-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid #e4edf1;
    color: #72838b;
    font-size: .7rem;
    font-weight: 800;
}

.platform-screen-dots {
    display: flex;
    gap: 5px;
}

.platform-screen-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8d5db;
}

.platform-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.platform-live i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5a9d53;
}

.platform-screen {
    padding: 14px;
    background: #eff4f7;
}

.platform-screen img {
    display: block;
    width: 100%;
    min-height: 410px;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
}

/* ---------------------------------------------------------
   TRUST STRIP
--------------------------------------------------------- */

.platform-trust {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.platform-trust-inner {
    display: grid;
    grid-template-columns: 185px 1fr;
    gap: 34px;
    align-items: center;
    min-height: 118px;
}

.platform-trust-label {
    color: #7a8991;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.45;
}

.platform-trust-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
}

    /* subtle fade at both edges */
    .platform-trust-marquee::before,
    .platform-trust-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 70px;
        z-index: 2;
        pointer-events: none;
    }

    .platform-trust-marquee::before {
        left: 0;
        background: linear-gradient( 90deg, #fff 0%, rgba(255,255,255,0) 100% );
    }

    .platform-trust-marquee::after {
        right: 0;
        background: linear-gradient( 270deg, #fff 0%, rgba(255,255,255,0) 100% );
    }

.platform-trust-track {
    display: flex;
    width: max-content;
    animation: trust-logo-scroll 35s linear infinite;
}

.platform-trust-logos {
    display: flex;
    align-items: center;
    gap: 64px;
    flex-shrink: 0;
    padding-right: 64px;
}

    .platform-trust-logos img {
        display: block;
        width: auto;
        height: 42px;
        max-width: 135px;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: .72;
        transition: filter .25s ease, opacity .25s ease;
    }

        .platform-trust-logos img:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

@keyframes trust-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* optional: pause when user points at the logos */
.platform-trust-marquee:hover .platform-trust-track {
    animation-play-state: paused;
}

@media(max-width: 767px) {
    .platform-trust-track {
        animation-duration: 26s;
    }

    .platform-trust-logos {
        gap: 42px;
        padding-right: 42px;
    }

        .platform-trust-logos img {
            height: 34px;
            max-width: 110px;
        }

    .platform-trust-marquee::before,
    .platform-trust-marquee::after {
        width: 35px;
    }
}

@media(prefers-reduced-motion: reduce) {
    .platform-trust-track {
        animation: none;
    }

    .platform-trust-marquee {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------
   UNS FOUNDATION
--------------------------------------------------------- */

.uns-stack {
    display: grid;
    grid-template-columns: minmax(300px,.65fr) minmax(0,1.35fr);
    gap: 90px;
    align-items: center;
}

.uns-column {
    max-width: 420px;
}

.uns-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 15px;
    align-items: center;
    min-height: 72px;
    padding: 14px 18px;
    border: 1px solid #d6e3e9;
    border-radius: 14px;
    background: #fff;
}

.uns-item-primary {
    border-color: transparent;
    background: linear-gradient(135deg,#1479a7,var(--blue));
    box-shadow: 0 10px 30px rgba(19,102,140,.16);
}

.uns-item-primary strong,
.uns-item-primary small,
.uns-item-primary .uns-level {
    color: #fff;
}

.uns-item-edge {
    border-color: #a9ccdb;
}

.uns-level {
    color: var(--red);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.uns-item strong,
.uns-item small {
    display: block;
}

.uns-item strong {
    color: #39525e;
    font-size: .93rem;
}

.uns-item small {
    margin-top: 2px;
    color: #839198;
    font-size: .7rem;
}

.uns-link {
    width: 1px;
    height: 18px;
    margin: 0 auto;
    background: #b9ccd5;
}

.uns-explainer {
    max-width: 630px;
}

.uns-explainer-tag {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e9f4f9;
    color: #446d7f;
    font-size: .7rem;
    font-weight: 700;
}

.uns-explainer h3 {
    margin: 22px 0 12px;
    color: #304a57;
    font-size: clamp(2rem,3vw,3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 700;
}

.uns-explainer p {
    max-width: 610px;
    color: #687a83;
    font-size: .98rem;
    line-height: 1.75;
}

.uns-data-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

.uns-data-list span {
    padding: 8px 12px;
    border: 1px solid #d5e2e8;
    border-radius: 999px;
    background: #fff;
    color: #617680;
    font-size: .72rem;
    font-weight: 800;
}

/* ---------------------------------------------------------
   CAPABILITIES
--------------------------------------------------------- */

.capability-list {
    border-top: 1px solid var(--line);
}

.capability-row {
    display: grid;
    grid-template-columns: 62px minmax(240px,.85fr) minmax(340px,1.25fr) auto;
    gap: 28px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.capability-index {
    color: var(--red);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.capability-title span {
    display: block;
    margin-bottom: 4px;
    color: #91a0a7;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.capability-title h3 {
    margin: 0;
    color: #38525e;
    font-size: 1.03rem;
    font-weight: 700;
}

.capability-row p {
    margin: 0;
    color: #6d7d85;
    font-size: .85rem;
    line-height: 1.6;
}

.capability-tag {
    min-width: 92px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #f0f6f8;
    color: #56727f;
    font-size: .66rem;
    font-weight: 900;
    text-align: center;
}

/* ---------------------------------------------------------
   PRODUCT USE CASES
--------------------------------------------------------- */

.platform-product-image {
    overflow: hidden;
    border: 1px solid #d2e0e7;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(31,65,82,.10);
}

.platform-product-image img {
    display: block;
    width: 100%;
    min-height: 420px;
    object-fit: cover;
}

.platform-product-image-dark {
    background: #1d313b;
}

.platform-text-points {
    margin-top: 28px;
    border-top: 1px solid var(--line);
}

.platform-text-points > div {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.platform-text-points strong {
    color: #3c5662;
    font-size: .8rem;
    font-weight: 700;
}

.platform-text-points span {
    color: #74838a;
    font-size: .8rem;
}

/* ---------------------------------------------------------
   APPLICATION MODULES
--------------------------------------------------------- */

.module-showcase {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
}

.module-feature {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    color: inherit;
    transition: .2s ease;
}

.module-feature:hover {
    transform: translateY(-2px);
    border-color: #b9d2dd;
    box-shadow: 0 16px 42px rgba(31,65,82,.08);
}

.module-feature-large {
    grid-row: span 2;
    min-height: 506px;
    padding: 0;
}

.module-feature-large .module-feature-copy {
    padding: 32px 32px 20px;
}

.module-feature-copy {
    position: relative;
    z-index: 2;
}

.module-category {
    display: block;
    margin-bottom: 13px;
    color: var(--red);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.module-feature h3 {
    margin-bottom: 10px;
    color: #35505d;
    font-size: 1.35rem;
    font-weight: 700;
}

.module-feature p {
    max-width: 570px;
    margin-bottom: 22px;
    color: #718188;
    font-size: .84rem;
    line-height: 1.6;
}

.module-link {
    color: var(--blue2);
    font-size: .76rem;
    font-weight: 700;
}

.module-feature-image {
    margin-top: auto;
}

.module-feature-image img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* ---------------------------------------------------------
   MANOMAY INTEGRATION
--------------------------------------------------------- */

.platform-integration {
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background:
        linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 42%,rgba(255,255,255,.32) 65%,rgba(255,255,255,.12) 100%),
        url("/images/ma_manomay_at_work.png") center / cover no-repeat;
    box-shadow: var(--shadow);
}

.platform-integration-copy {
    max-width: 630px;
    padding: 65px;
}

.platform-integration-copy h2 {
    margin-bottom: 18px;
    color: #314954;
    font-size: clamp(2.5rem,4vw,3.8rem);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 700;
}

.platform-integration-note {
    max-width: 570px;
    margin-top: 22px;
    color: #637780;
    font-size: .82rem;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.platform-final-section {
    padding-top: 55px;
}

.platform-final {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 55px;
    align-items: center;
    padding: 48px 52px;
    border-radius: 24px;
    background: linear-gradient(135deg,#113f59,#13668c);
    color: #fff;
}

.platform-final .eyebrow {
    color: #ccefff;
}

.platform-final h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(2rem,3.5vw,3.3rem);
    letter-spacing: -.045em;
    font-weight: 700;
}

.platform-final p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    line-height: 1.65;
}

.platform-final-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.platform-text-link {
    color: rgba(255,255,255,.75);
    font-size: .72rem;
    font-weight: 800;
}

.platform-text-link:hover {
    color: #fff;
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.platform-footer {
    margin-top: 70px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.platform-footer-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: center;
    padding: 42px 0;
}

.platform-footer-logo {
    display: block;
    width: auto;
    height: 36px;
}

.platform-footer-main p {
    max-width: 390px;
    margin: 12px 0 0;
    color: #819097;
    font-size: .75rem;
    line-height: 1.55;
}

.platform-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 22px;
}

.platform-footer a {
    color: #647780;
    font-size: .74rem;
    font-weight: 800;
}

.platform-footer a:hover {
    color: var(--blue);
}

.platform-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 18px 0 28px;
    border-top: 1px solid var(--line);
    color: #91a0a6;
    font-size: .7rem;
}

.platform-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 991px) {

    .section {
        padding: 76px 0;
    }

    .platform-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 40px;
    }

    .platform-hero {
        padding: 75px 0 70px;
    }

    .platform-screen-wrap {
        margin-top: 18px;
        transform: none;
    }

    .platform-screen img {
        min-height: 330px;
    }

    .platform-trust-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 0;
    }

    .platform-trust-logos {
        grid-template-columns: repeat(3,1fr);
    }

    .uns-stack {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .uns-column {
        max-width: none;
    }

    .capability-row {
        grid-template-columns: 52px 1fr auto;
    }

    .capability-row p {
        grid-column: 2 / 4;
    }

    .module-showcase {
        grid-template-columns: 1fr;
    }

    .module-feature-large {
        grid-row: auto;
        min-height: 460px;
    }

    .platform-integration {
        min-height: 470px;
        background:
            linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.90) 57%,rgba(255,255,255,.55) 100%),
            url("/images/ma_manomay_at_work.png") center / cover no-repeat;
    }

    .platform-integration-copy {
        padding: 44px 32px;
    }

    .platform-final {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .platform-final-actions {
        align-items: flex-start;
    }

    .platform-footer-main {
        grid-template-columns: 1fr;
    }

    .platform-footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {

    .platform-hero h1 {
        font-size: clamp(2.8rem,14vw,4rem);
    }

    .platform-screen-toolbar {
        grid-template-columns: auto 1fr;
    }

    .platform-live {
        display: none;
    }

    .platform-trust-logos {
        grid-template-columns: repeat(2,1fr);
        gap: 22px;
    }

    .capability-row {
        grid-template-columns: 42px 1fr;
        gap: 15px;
    }

    .capability-row p,
    .capability-tag {
        grid-column: 2;
    }

    .capability-tag {
        justify-self: start;
    }

    .platform-product-image img {
        min-height: 300px;
    }

    .platform-text-points > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .module-feature {
        padding: 24px;
    }

    .module-feature-large {
        padding: 0;
    }

    .module-feature-image img {
        height: 220px;
    }

    .platform-final {
        padding: 36px 28px;
    }

    .platform-footer-bottom {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 575px) {

    .brand-wordmark {
        height: 46px;
    }

    .brand-slogan {
        font-size: .49rem;
    }

    .platform-trust-logos img {
        max-height: 34px;
    }
}


/* =========================================================
   MODULE DETAIL PAGES
   ========================================================= */

.module-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 670px;
    display: flex;
    align-items: center;
    background: #eef4f7;
}

.module-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-position: center;
    background-size: cover;
}

.module-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.94) 35%,
            rgba(255,255,255,.68) 56%,
            rgba(255,255,255,.15) 78%,
            rgba(255,255,255,.06) 100%
        );
}

.module-hero h1 {
    max-width: 650px;
    margin: 0 0 24px;
    color: #314954;
    font-size: clamp(3.2rem,5.5vw,5.4rem);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 700;
}

.module-hero-copy {
    max-width: 600px;
    color: #566b75;
    font-size: 1.05rem;
    line-height: 1.78;
}

.module-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.module-hero-tags span {
    padding: 7px 11px;
    border: 1px solid rgba(177,201,212,.9);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    color: #58717e;
    font-size: .68rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.module-summary {
    position: relative;
    z-index: 3;
    margin-top: -38px;
}

.module-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31,65,82,.09);
}

.module-summary-grid > div {
    min-height: 155px;
    padding: 27px;
    border-right: 1px solid var(--line);
}

.module-summary-grid > div:last-child {
    border-right: none;
}

.module-summary-grid span {
    display: block;
    margin-bottom: 17px;
    color: var(--red);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.module-summary-grid strong {
    display: block;
    margin-bottom: 7px;
    color: #3b5662;
    font-size: .9rem;
    font-weight: 700;
}

.module-summary-grid p {
    margin: 0;
    color: #77868d;
    font-size: .76rem;
    line-height: 1.55;
}

.module-process {
    border-top: 1px solid var(--line);
}

.module-process-step {
    display: grid;
    grid-template-columns: 80px minmax(0,1fr);
    gap: 28px;
    padding: 31px 0;
    border-bottom: 1px solid var(--line);
}

.module-process-number {
    color: var(--red);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.module-process-step span {
    display: block;
    margin-bottom: 6px;
    color: #87969d;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.module-process-step h3 {
    margin-bottom: 8px;
    color: #3a5561;
    font-size: 1.13rem;
    font-weight: 700;
}

.module-process-step p {
    max-width: 850px;
    margin: 0;
    color: #6d7e86;
    font-size: .87rem;
    line-height: 1.68;
}

.module-metric-board {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.module-metric {
    min-height: 145px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.module-metric span,
.module-metric strong,
.module-metric small {
    display: block;
}

.module-metric span {
    color: #708188;
    font-size: .72rem;
    font-weight: 700;
}

.module-metric strong {
    margin: 9px 0 4px;
    color: #2d5367;
    font-size: 1.75rem;
    letter-spacing: -.04em;
}

.module-metric small {
    color: #98a4aa;
    font-size: .67rem;
}

.module-metric-wide {
    grid-column: 1 / -1;
}

.module-record {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 20px;
    border-top: 1px solid var(--line);
}

.module-record > div {
    padding: 15px 15px 0 0;
}

.module-record b,
.module-record em {
    display: block;
    font-style: normal;
}

.module-record b {
    color: #89979d;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.module-record em {
    margin-top: 4px;
    color: #425d69;
    font-size: .82rem;
    font-weight: 700;
}

.module-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.module-analysis {
    min-height: 245px;
    padding: 30px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.module-analysis span {
    display: block;
    margin-bottom: 28px;
    color: var(--red);
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.module-analysis h3 {
    margin-bottom: 9px;
    color: #39545f;
    font-size: 1.12rem;
    font-weight: 700;
}

.module-analysis p {
    margin: 0;
    color: #72828a;
    font-size: .84rem;
    line-height: 1.65;
}

.module-platform-band {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 80px;
    align-items: center;
}

.module-platform-band h2 {
    margin-bottom: 18px;
    color: #344e5a;
    font-size: clamp(2.4rem,4vw,3.7rem);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 700;
}

.module-platform-band p {
    max-width: 690px;
    margin: 0;
    color: #687a83;
    font-size: .95rem;
    line-height: 1.75;
}

.module-platform-tree {
    max-width: 420px;
    margin-left: auto;
}

.module-platform-tree div {
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: #58707c;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.module-platform-tree span {
    display: block;
    padding: 4px 0;
    color: var(--blue);
    font-weight: 700;
    text-align: center;
}

.module-platform-tree .active {
    border-color: var(--blue);
    background: linear-gradient(135deg,var(--blue2),var(--blue));
    color: #fff;
}

.module-benefits {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.module-benefits > div {
    min-height: 220px;
    padding: 27px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.module-benefits span {
    display: block;
    margin-bottom: 25px;
    color: var(--red);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.module-benefits h3 {
    margin-bottom: 8px;
    color: #38525f;
    font-size: 1rem;
    font-weight: 700;
}

.module-benefits p {
    margin: 0;
    color: #718189;
    font-size: .8rem;
    line-height: 1.6;
}

@media(max-width:991px) {
    .module-hero {
        min-height: 620px;
    }

    .module-hero-photo {
        background-position: 64% center;
    }

    .module-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.97) 0%,
                rgba(255,255,255,.92) 47%,
                rgba(255,255,255,.57) 76%,
                rgba(255,255,255,.25) 100%
            );
    }

    .module-summary-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .module-summary-grid > div:nth-child(2) {
        border-right: none;
    }

    .module-summary-grid > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .module-metric-board {
        margin-top: 15px;
    }

    .module-platform-band {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .module-platform-tree {
        max-width: none;
        margin-left: 0;
    }

    .module-benefits {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:767px) {
    .module-summary {
        margin-top: -20px;
    }

    .module-summary-grid {
        grid-template-columns: 1fr;
    }

    .module-summary-grid > div {
        border-right: none !important;
        border-bottom: 1px solid var(--line);
    }

    .module-summary-grid > div:last-child {
        border-bottom: none;
    }

    .module-process-step {
        grid-template-columns: 48px 1fr;
        gap: 14px;
    }

    .module-metric-board,
    .module-analysis-grid,
    .module-benefits {
        grid-template-columns: 1fr;
    }

    .module-metric-wide {
        grid-column: auto;
    }

    .module-record {
        grid-template-columns: repeat(2,1fr);
    }
}


/* =========================================================
   MANOMAY TITLE DOT
   Same visual language as the main Manomay website.
   Add to platform.css near the shared typography styles.
   ========================================================= */

.title-dot {
    display: inline-block;
    width: .18em;
    height: .18em;
    min-width: 7px;
    min-height: 7px;
    margin-left: .10em;
    border-radius: 50%;
    background: var(--red);
    vertical-align: .00em;
}

/* Keep the dot visually balanced in very large hero headings. */
.platform-hero h1 .title-dot,
.module-hero h1 .title-dot {
    width: .16em;
    height: .16em;
    vertical-align: .00em;
}

@media (max-width: 575px) {
    .title-dot {
        min-width: 6px;
        min-height: 6px;
    }
}


.module-quality-note {
    max-width: 650px;
    margin-top: 22px;
    padding: 17px 19px;
    border-left: 3px solid var(--blue);
    background: #fff;
    color: #687a83;
    font-size: .82rem;
    line-height: 1.65;
}

.module-quality-list {
    border-top: 1px solid var(--line);
}

.module-quality-list > div {
    display: grid;
    grid-template-columns: 48px 180px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.module-quality-list span {
    color: var(--red);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.module-quality-list strong {
    color: #3c5662;
    font-size: .86rem;
    font-weight: 700;
}

.module-quality-list p {
    margin: 0;
    color: #73838a;
    font-size: .8rem;
    line-height: 1.6;
}

.module-control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.module-control-grid > div {
    min-height: 240px;
    padding: 30px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.module-control-grid span {
    display: block;
    margin-bottom: 25px;
    color: var(--red);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.module-control-grid h3 {
    margin-bottom: 10px;
    color: #38525f;
    font-size: 1.15rem;
    font-weight: 700;
}

.module-control-grid p {
    margin: 0;
    color: #718189;
    font-size: .84rem;
    line-height: 1.65;
}

@media(max-width:767px) {
    .module-quality-list > div {
        grid-template-columns: 38px 1fr;
    }

    .module-quality-list p {
        grid-column: 2;
    }

    .module-control-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   EMS & CARBON MODULE
   ========================================================= */

.energy-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:105px 0 96px;
    background:
        radial-gradient(circle at 82% 22%,rgba(0,124,193,.12),transparent 28%),
        linear-gradient(180deg,#fff 0%,#f4f9fb 100%);
}

.energy-hero-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.32;
    background-image:
        linear-gradient(rgba(19,102,140,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(19,102,140,.055) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);
}

.energy-hero h1{
    max-width:640px;
    margin:0 0 24px;
    color:#314954;
    font-size:clamp(3.4rem,5.4vw,5.5rem);
    line-height:.96;
    letter-spacing:-.06em;
    font-weight:700;
}

.energy-dashboard{
    padding:20px;
    border:1px solid #d5e3e9;
    border-radius:22px;
    background:rgba(255,255,255,.96);
    box-shadow:0 28px 75px rgba(31,65,82,.13);
}

.energy-dashboard-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:3px 2px 18px;
}

.energy-dashboard-head span,
.energy-dashboard-head strong{
    display:block;
}

.energy-dashboard-head span{
    color:#8a999f;
    font-size:.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.energy-dashboard-head strong{
    margin-top:3px;
    color:#36525f;
    font-size:1rem;
}

.energy-period{
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#607782;
    font-size:.67rem;
    font-weight:700;
}

.energy-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.energy-kpis > div{
    min-height:110px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fbfdfe;
}

.energy-kpis span,.energy-kpis strong,.energy-kpis small{display:block}

.energy-kpis span{
    color:#84939a;
    font-size:.65rem;
    font-weight:700;
}

.energy-kpis strong{
    margin:8px 0 4px;
    color:#31566a;
    font-size:1.25rem;
    font-weight:700;
}

.energy-kpis small{
    color:#9ca8ad;
    font-size:.61rem;
}

.energy-graph{
    margin-top:12px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:13px;
    background:
        linear-gradient(to top,rgba(220,230,235,.62) 1px,transparent 1px),
        #fff;
    background-size:100% 38px;
}

.energy-graph-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:8px;
}

.energy-graph-title span{
    color:#46616d;
    font-size:.72rem;
    font-weight:700;
}

.energy-graph-title small{
    color:#98a6ac;
    font-size:.62rem;
}

.energy-graph svg{
    display:block;
    width:100%;
    height:175px;
}

.energy-tree{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:12px;
    color:#74858d;
    font-size:.64rem;
    font-weight:800;
}

.energy-tree i{font-style:normal;color:#a5b4bb}
.energy-tree strong{color:var(--blue2)}

.energy-context-grid{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:90px;
    align-items:center;
}

.energy-context-tree{max-width:430px}

.energy-context-node{
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
}

.energy-context-node span,.energy-context-node strong{display:block}

.energy-context-node span{
    margin-bottom:3px;
    color:var(--red);
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.energy-context-node strong{
    color:#45606c;
    font-size:.83rem;
}

.energy-context-node-primary{
    border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--blue));
}

.energy-context-node-primary span,
.energy-context-node-primary strong{color:#fff}

.energy-context-link{
    width:1px;
    height:15px;
    margin:auto;
    background:#b9ccd5;
}

.energy-context-copy h3{
    margin:0 0 15px;
    color:#36515e;
    font-size:clamp(2rem,3.2vw,3rem);
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:700;
}

.energy-context-copy > p{
    max-width:650px;
    color:#697b84;
    font-size:.95rem;
    line-height:1.75;
}

.energy-context-points{
    margin-top:28px;
    border-top:1px solid var(--line);
}

.energy-context-points > div{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:15px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
}

.energy-context-points strong{
    color:#3d5965;
    font-size:.78rem;
    font-weight:700;
}

.energy-context-points span{
    color:#7b898f;
    font-size:.78rem;
}

.energy-relationship{
    overflow:hidden;
    border: 4px solid var(--blue2);
    border-radius:20px;
    background:#fff;
    box-shadow:0 16px 44px rgba(31,65,82,.08);
}

.energy-relationship-source{
    padding:24px;
    border-bottom:1px solid var(--line);
}

.energy-relationship-source span,
.energy-relationship-source strong{display:block}

.energy-relationship-source span{
    color:#8a989f;
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.energy-relationship-source strong{
    margin-top:4px;
    color:#36545f;
    font-size:1rem;
}

.energy-relationship-data{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.energy-relationship-data > div{
    padding:22px;
    border-right:1px solid var(--line);
}

.energy-relationship-data > div:last-child{border-right:none}
.energy-relationship-data span,.energy-relationship-data strong{display:block}

.energy-relationship-data span{
    color:#89979d;
    font-size:.64rem;
    font-weight:800;
}

.energy-relationship-data strong{
    margin-top:7px;
    color:#31586c;
    font-size:1.2rem;
    font-weight:700;
}

.energy-relationship-result{
    padding:24px;
    border-top:1px solid var(--line);
    background:#f6fafc;
}

.energy-relationship-result span,
.energy-relationship-result strong{display:block}

.energy-relationship-result span{
    color:var(--red);
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.energy-relationship-result strong{
    margin-top:5px;
    color:#375561;
    font-size:.95rem;
}

.energy-relationship-result p{
    margin:7px 0 0;
    color:#7b8a91;
    font-size:.75rem;
}

.energy-method-note{
    max-width:650px;
    margin-top:22px !important;
    padding:17px 19px;
    border-left:3px solid var(--blue);
    background:#f5fafc;
    color:#667b85 !important;
    font-size:.8rem !important;
}

.carbon-visual{
    max-width:430px;
    margin-left:auto;
}

.carbon-visual > div:not(.carbon-arrow){
    padding:17px 18px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
}

.carbon-visual span,.carbon-visual strong{display:block}

.carbon-visual span{
    color:#89979d;
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.carbon-visual strong{
    margin-top:3px;
    color:#3e5965;
    font-size:.84rem;
}

.carbon-arrow{
    padding:6px 0;
    color:var(--blue);
    font-weight:700;
    text-align:center;
}

.carbon-result{
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--blue2),var(--blue)) !important;
}

.carbon-result span,.carbon-result strong{color:#fff}

@media(max-width:991px){
    .energy-hero{padding:75px 0}
    .energy-dashboard{margin-top:20px}
    .energy-context-grid{grid-template-columns:1fr;gap:42px}
    .energy-context-tree,.carbon-visual{max-width:none;margin-left:0}
}

@media(max-width:767px){
    .energy-kpis{grid-template-columns:1fr}
    .energy-relationship-data{grid-template-columns:1fr}
    .energy-relationship-data > div{border-right:none;border-bottom:1px solid var(--line)}
    .energy-relationship-data > div:last-child{border-bottom:none}
    .energy-context-points > div{grid-template-columns:1fr;gap:3px}
}



/* =========================================================
   EMS & POWER ANALYTICS V2
   ========================================================= */

.ems-screen{
    padding:20px;
    border:1px solid #d5e3e9;
    border-radius:22px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 75px rgba(31,65,82,.13);
}

.ems-screen-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:2px 2px 18px;
}

.ems-screen-head span,
.ems-screen-head strong{
    display:block;
}

.ems-screen-head span{
    color:#8b999f;
    font-size:.64rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ems-screen-head strong{
    margin-top:3px;
    color:#35525f;
    font-size:.98rem;
}

.ems-live{
    display:flex;
    align-items:center;
    gap:6px;
    color:#74858c;
    font-size:.64rem;
    font-weight:800;
}

.ems-live i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5a9d53;
}

.ems-kpi-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.ems-kpi-row > div{
    min-height:105px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fbfdfe;
}

.ems-kpi-row span,
.ems-kpi-row strong,
.ems-kpi-row small{
    display:block;
}

.ems-kpi-row span{
    color:#85949b;
    font-size:.62rem;
    font-weight:700;
}

.ems-kpi-row strong{
    margin:8px 0 4px;
    color:#31576a;
    font-size:1.22rem;
    font-weight:700;
}

.ems-kpi-row small{
    color:#9aa7ad;
    font-size:.6rem;
}

.ems-flow-visual{
    margin-top:12px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#f8fbfc;
}

.ems-flow-node{
    padding:13px 15px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
}

.ems-flow-node.main{
    border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--blue));
}

.ems-flow-node span,
.ems-flow-node strong,
.ems-flow-groups span,
.ems-flow-groups strong,
.ems-flow-groups small{
    display:block;
}

.ems-flow-node span,
.ems-flow-groups span{
    font-size:.59rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ems-flow-node span{color:#8a989e}
.ems-flow-node strong{color:#3e5965;font-size:.82rem}
.ems-flow-node.main span,
.ems-flow-node.main strong{color:#fff}

.ems-flow-arrow{
    padding:6px;
    text-align:center;
    color:var(--blue);
    font-weight:700;
}

.ems-flow-groups{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.ems-flow-groups > div{
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
}

.ems-flow-groups span{color:#929fa5}
.ems-flow-groups strong{margin-top:3px;color:#405d69;font-size:.75rem}
.ems-flow-groups small{margin-top:5px;color:var(--blue2);font-size:.68rem;font-weight:700}

.ems-screen-foot{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
    color:#788990;
    font-size:.62rem;
    font-weight:800;
}

.ems-screen-foot i{font-style:normal;color:#aebbc1}
.ems-screen-foot strong{color:var(--blue2)}

.ems-flow-section{
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.ems-flow-copy h3{
    margin:0 0 14px;
    color:#35515e;
    font-size:clamp(2rem,3vw,2.9rem);
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:700;
}

.ems-flow-copy > p{
    color:#6b7c84;
    font-size:.94rem;
    line-height:1.75;
}

.ems-hierarchy{
    max-width:520px;
    margin-left:auto;
}

.ems-hierarchy-node{
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
}

.ems-hierarchy-node span,
.ems-hierarchy-node strong,
.ems-hierarchy-node small{
    display:block;
}

.ems-hierarchy-node span{
    color:var(--red);
    font-size:.6rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.ems-hierarchy-node strong{
    margin-top:3px;
    color:#405a66;
    font-size:.8rem;
}

.ems-hierarchy-node small{
    margin-top:2px;
    color:#929fa5;
    font-size:.61rem;
}

.ems-hierarchy-node.primary{
    border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--blue));
}

.ems-hierarchy-node.primary span,
.ems-hierarchy-node.primary strong,
.ems-hierarchy-node.primary small{
    color:#fff;
}

.ems-hierarchy-link{
    width:1px;
    height:18px;
    margin:auto;
    background:#b8cbd4;
}

.ems-hierarchy-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.ems-levels{
    border-top:1px solid var(--line);
}

.ems-level{
    display:grid;
    grid-template-columns:115px 1fr;
    gap:30px;
    padding:29px 0;
    border-bottom:1px solid var(--line);
}

.ems-level-number{
    color:var(--red);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
}

.ems-level span{
    display:block;
    margin-bottom:5px;
    color:#8b999f;
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ems-level h3{
    margin-bottom:8px;
    color:#395460;
    font-size:1.12rem;
    font-weight:700;
}

.ems-level p{
    max-width:860px;
    margin:0;
    color:#708088;
    font-size:.85rem;
    line-height:1.65;
}

.ems-analysis-board{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.ems-analysis-kpi,
.ems-analysis-wide{
    padding:22px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
}

.ems-analysis-kpi{
    min-height:140px;
}

.ems-analysis-kpi span,
.ems-analysis-kpi strong,
.ems-analysis-kpi small,
.ems-analysis-wide > span{
    display:block;
}

.ems-analysis-kpi span,
.ems-analysis-wide > span{
    color:#84939a;
    font-size:.65rem;
    font-weight:700;
}

.ems-analysis-kpi strong{
    margin:12px 0 5px;
    color:#31596c;
    font-size:1.55rem;
    font-weight:700;
}

.ems-analysis-kpi small{
    color:#9aa7ac;
    font-size:.64rem;
}

.ems-analysis-wide{
    grid-column:1/-1;
}

.ems-analysis-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.ems-analysis-tags b{
    padding:8px 11px;
    border-radius:999px;
    background:#eef5f8;
    color:#57727e;
    font-size:.67rem;
    font-weight:700;
}

.ems-report-layout{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:55px;
    align-items:start;
}

.ems-report-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 15px 42px rgba(31,65,82,.07);
}

.ems-report-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:22px;
    border-bottom:1px solid var(--line);
}

.ems-report-head span,
.ems-report-head strong{
    display:block;
}

.ems-report-head span{
    color:#87959c;
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ems-report-head strong{
    margin-top:3px;
    color:#38545f;
    font-size:.9rem;
}

.ems-export-badge{
    padding:7px 10px;
    border-radius:999px;
    background:#e9f5eb;
    color:#4d8150;
    font-size:.64rem;
    font-weight:700;
}

.ems-report-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    border-bottom:1px solid var(--line);
}

.ems-report-summary > div{
    padding:17px;
    border-right:1px solid var(--line);
}

.ems-report-summary > div:last-child{border-right:none}

.ems-report-summary span,
.ems-report-summary strong{
    display:block;
}

.ems-report-summary span{
    color:#8b989e;
    font-size:.6rem;
    font-weight:800;
}

.ems-report-summary strong{
    margin-top:5px;
    color:#35566a;
    font-size:.83rem;
    font-weight:700;
}

.ems-report-table{
    padding:10px 20px 20px;
}

.ems-report-table > div{
    display:grid;
    grid-template-columns:1.4fr .65fr .55fr .7fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #edf2f4;
    color:#6f8088;
    font-size:.7rem;
}

.ems-report-table .head{
    color:#405b67;
    font-weight:700;
}

.ems-report-copy{
    border-top:1px solid var(--line);
}

.ems-report-point{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:15px;
    padding:21px 0;
    border-bottom:1px solid var(--line);
}

.ems-report-point > span{
    color:var(--red);
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.1em;
}

.ems-report-point strong{
    display:block;
    color:#3d5864;
    font-size:.86rem;
    font-weight:700;
}

.ems-report-point p{
    margin:4px 0 0;
    color:#77868d;
    font-size:.78rem;
    line-height:1.55;
}

.ems-carbon-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:start;
}

.ems-carbon-flow{
    display:grid;
    gap:8px;
}

.ems-carbon-flow > div{
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
}

.ems-carbon-flow span,
.ems-carbon-flow strong{
    display:block;
}

.ems-carbon-flow span{
    color:#8b989e;
    font-size:.61rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ems-carbon-flow strong{
    margin-top:3px;
    color:#405b67;
    font-size:.84rem;
}

.ems-carbon-flow > i{
    color:var(--blue);
    font-style:normal;
    font-weight:700;
    text-align:center;
}

.ems-carbon-flow .result{
    border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--blue));
}

.ems-carbon-flow .result span,
.ems-carbon-flow .result strong{
    color:#fff;
}

.ems-carbon-details{
    border-top:1px solid var(--line);
}

.ems-carbon-details > div{
    padding:21px 0;
    border-bottom:1px solid var(--line);
}

.ems-carbon-details span{
    display:block;
    margin-bottom:4px;
    color:var(--red);
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.ems-carbon-details strong{
    display:block;
    color:#3d5864;
    font-size:.88rem;
    font-weight:700;
}

.ems-carbon-details p{
    margin:6px 0 0;
    color:#74848b;
    font-size:.8rem;
    line-height:1.6;
}

.ems-flow-image-card{
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(31, 65, 82, 0.08);
}

.ems-flow-image-card img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.ems-flow-image-caption{
    margin: 12px 4px 0;
    color: #6f8088;
    font-size: .78rem;
    line-height: 1.5;
}

@media(max-width:991px){
    .ems-flow-section,
    .ems-report-layout,
    .ems-carbon-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .ems-hierarchy{
        max-width:none;
        margin-left:0;
    }

    .ems-report-summary{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:767px){
    .ems-kpi-row,
    .ems-analysis-board{
        grid-template-columns:1fr;
    }

    .ems-flow-groups,
    .ems-hierarchy-row{
        grid-template-columns:1fr;
    }

    .ems-level{
        grid-template-columns:1fr;
        gap:8px;
    }

    .ems-analysis-wide{
        grid-column:auto;
    }

    .ems-report-summary{
        grid-template-columns:1fr;
    }

    .ems-report-summary > div{
        border-right:none;
        border-bottom:1px solid var(--line);
    }

    .ems-report-table > div{
        grid-template-columns:1.2fr .65fr .55fr;
    }

    .ems-report-table > div span:last-child{
        display:none;
    }
}

/* =========================================================
   ALARM DASHBOARD MODULE
   ========================================================= */

.alarm-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:105px 0 96px;
    background:
        radial-gradient(circle at 82% 20%,rgba(192,23,23,.055),transparent 24%),
        radial-gradient(circle at 76% 35%,rgba(0,124,193,.09),transparent 32%),
        linear-gradient(180deg,#fff 0%,#f6fafc 100%);
}

.alarm-hero-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.28;
    background-image:
        linear-gradient(rgba(19,102,140,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(19,102,140,.05) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);
}

.alarm-hero h1{
    max-width:650px;
    margin:0 0 24px;
    color:#314954;
    font-size:clamp(3.4rem,5.5vw,5.5rem);
    line-height:.96;
    letter-spacing:-.06em;
    font-weight:700;
}

.alarm-dashboard-preview{
    overflow:hidden;
    padding:20px;
    border:1px solid #d6e3e9;
    border-radius:22px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 75px rgba(31,65,82,.13);
}

.alarm-preview-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:2px 2px 18px;
}

.alarm-preview-head span,
.alarm-preview-head strong{display:block}

.alarm-preview-head span{
    color:#8a989f;
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.alarm-preview-head strong{
    margin-top:3px;
    color:#38535f;
    font-size:.98rem;
}

.alarm-preview-live{
    display:flex;
    align-items:center;
    gap:6px;
    color:#74858c;
    font-size:.65rem;
    font-weight:700;
}

.alarm-preview-live i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5a9d53;
}

.alarm-severity-strip{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    margin-bottom:12px;
}

.alarm-severity-strip .severity{
    min-height:86px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fbfdfe;
}

.alarm-severity-strip span,
.alarm-severity-strip strong{
    display:block;
}

.alarm-severity-strip span{
    font-size:.58rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.alarm-severity-strip strong{
    margin-top:8px;
    color:#3c5965;
    font-size:1.25rem;
}

.alarm-severity-strip .emergency span,
.alarm-severity-strip .fatal span{color:#a92727}
.alarm-severity-strip .fault span{color:#9b6710}
.alarm-severity-strip .warning span{color:#bc7a08}
.alarm-severity-strip .message span{color:var(--blue2)}

.alarm-preview-table{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
}

.alarm-preview-row{
    display:grid;
    grid-template-columns:.8fr 1.55fr 1.15fr .65fr;
    gap:10px;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #edf2f4;
    color:#62747d;
    font-size:.66rem;
}

.alarm-preview-row:last-child{border-bottom:none}

.alarm-preview-row-head{
    background:#f7fafb;
    color:#465f6a;
    font-weight:700;
}

.alarm-state{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
}

.alarm-state.critical{background:#c01717}
.alarm-state.warning{background:#d88b00}
.alarm-state.info{background:#007cc1}

.alarm-preview-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.alarm-preview-actions span{
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#667b84;
    font-size:.6rem;
    font-weight:700;
}

.alarm-category-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.alarm-category{
    min-height:220px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.alarm-category > span{
    display:block;
    margin-bottom:28px;
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.alarm-category strong{
    display:block;
    margin-bottom:8px;
    color:#3c5662;
    font-size:.9rem;
}

.alarm-category p{
    margin:0;
    color:#75858c;
    font-size:.77rem;
    line-height:1.6;
}

.alarm-category.emergency > span,
.alarm-category.fatal > span{color:#a92727}
.alarm-category.fault > span{color:#9b6710}
.alarm-category.warning > span{color:#bc7a08}
.alarm-category.message > span{color:var(--blue2)}

.alarm-active-layout{
    display:block;
}

.alarm-active-table{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.alarm-active-head,
.alarm-active-row{
    display:grid;
    grid-template-columns:.75fr 1.65fr 1.2fr .65fr 1fr;
    gap:12px;
    align-items:center;
    padding:14px 16px;
}

.alarm-active-head{
    border-bottom:1px solid var(--line);
    background:#f7fafb;
    color:#405b67;
    font-size:.64rem;
    font-weight:700;
}

.alarm-active-row{
    border-bottom:1px solid #edf2f4;
    color:#6b7c84;
    font-size:.69rem;
}

.alarm-active-row:last-child{border-bottom:none}
.alarm-active-row strong{color:#425d69;font-size:.69rem}

.pill{
    justify-self:start;
    padding:5px 8px;
    border-radius:999px;
    font-size:.59rem;
    font-weight:700;
}

.pill.message{background:#eaf4fb;color:#13668c}
.pill.fault{background:#fff4dc;color:#8e620d}
.pill.fatal{background:#fbe9e9;color:#a92727}

.alarm-action-set{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.alarm-action-set b{
    padding:5px 7px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#59717c;
    font-size:.57rem;
    font-weight:700;
}

.alarm-actions-copy{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:22px;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.alarm-actions-copy > div{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:12px;
    align-content:start;
    min-height:150px;
    padding:20px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.62);
}

.alarm-actions-copy span{
    color:var(--red);
    font-size:.62rem;
    font-weight:700;
}

.alarm-actions-copy strong{
    display:block;
    color:#3f5a66;
    font-size:.8rem;
}

.alarm-actions-copy p{
    margin:4px 0 0;
    color:#78878e;
    font-size:.73rem;
    line-height:1.55;
}

.alarm-insight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.alarm-summary-panel,
.alarm-common-panel{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.alarm-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px;
    border-bottom:1px solid var(--line);
}

.alarm-panel-head span,
.alarm-panel-head strong{
    display:block;
    margin:0;
}

.alarm-panel-head span{
    color:#89979d;
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.alarm-panel-head strong{
    color:#3d5965;
    font-size:.72rem;
    font-weight:700;
    text-align:right;
    white-space:nowrap;
}

.alarm-summary-row{
    display:grid;
    grid-template-columns:1.2fr .45fr .65fr .55fr;
    gap:10px;
    padding:12px 18px;
    border-bottom:1px solid #edf2f4;
    color:#6f8088;
    font-size:.72rem;
}

.alarm-summary-row:last-child{border-bottom:none}
.alarm-summary-row b{font-weight:800;text-align:center}
.alarm-summary-row strong{color:#395762;text-align:center}

.alarm-common-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid #edf2f4;
}

.alarm-common-row:last-child{border-bottom:none}

.alarm-common-row strong,
.alarm-common-row small{
    display:block;
}

.alarm-common-row strong{
    color:#405b67;
    font-size:.76rem;
}

.alarm-common-row small{
    margin-top:3px;
    color:#919fa5;
    font-size:.63rem;
}

.alarm-common-row > span{
    min-width:36px;
    padding:5px 8px;
    border-radius:999px;
    background:#eaf4fb;
    color:var(--blue2);
    font-size:.62rem;
    font-weight:700;
    text-align:center;
}

.alarm-lifecycle-grid{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:18px;
}

.alarm-lifecycle-panel{
    min-height:315px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.alarm-panel-label{
    display:block;
    margin-bottom:24px;
    color:var(--red);
    font-size:.63rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.alarm-lifecycle-panel h3{
    margin-bottom:9px;
    color:#3d5864;
    font-size:1.1rem;
    font-weight:700;
}

.alarm-lifecycle-panel > p{
    color:#74848b;
    font-size:.8rem;
    line-height:1.65;
}

.alarm-muted-state{
    margin-top: 30px;
    padding: 18px;
    border: 1px solid var(--blue2);
    border-radius: 12px;
    text-align: center;
    width: 201px;
}

.alarm-muted-state strong,
.alarm-muted-state span{
    display:block;
}

.alarm-muted-state strong{
    color:#526b76;
    font-size:.8rem;
}

.alarm-muted-state span{
    margin-top:3px;
    color:#92a0a6;
    font-size:.65rem;
}

.alarm-history-compact{
    margin-top:20px;
    border-top:1px solid var(--line);
}

.alarm-history-compact > div{
    padding:15px 0;
    border-bottom:1px solid var(--line);
}

.alarm-history-compact span,
.alarm-history-compact strong,
.alarm-history-compact small{
    display:block;
}

.alarm-history-compact span{
    color:var(--red);
    font-size:.6rem;
    font-weight:700;
    text-transform:uppercase;
}

.alarm-history-compact strong{
    margin-top:4px;
    color:#405b67;
    font-size:.77rem;
}

.alarm-history-compact small{
    margin-top:3px;
    color:#909da3;
    font-size:.62rem;
}

@media(max-width:1100px){
    .alarm-category-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:991px){
    .alarm-hero{padding:75px 0}
    .alarm-dashboard-preview{margin-top:18px}
    .alarm-active-layout{grid-template-columns:1fr}
    .alarm-insight-grid{grid-template-columns:1fr}
    .alarm-lifecycle-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
    .alarm-severity-strip{grid-template-columns:repeat(2,1fr)}
    .alarm-category-grid{grid-template-columns:1fr}

    .alarm-preview-row,
    .alarm-active-head,
    .alarm-active-row{
        grid-template-columns:1fr 1fr;
    }

    .alarm-preview-row > span:nth-child(n+3),
    .alarm-active-row > *:nth-child(n+3){
        grid-column:2;
    }

    .alarm-active-head > span:nth-child(n+3){
        display:none;
    }
}


/* Active alarm action explainer alignment */
.alarm-actions-copy > div > p{
    grid-column:2;
}

@media(max-width:991px){
    .alarm-actions-copy{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:575px){
    .alarm-actions-copy{
        grid-template-columns:1fr;
    }
}


@media(max-width:575px){
    .alarm-panel-head{
        gap:12px;
    }

    .alarm-panel-head strong{
        font-size:.66rem;
        white-space:normal;
    }
}

/* =========================================================
   BIG BAG FILLING MODULE
   ========================================================= */

.bag-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:105px 0 96px;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.91) 30%,
            rgba(255,255,255,.72) 52%,
            rgba(255,255,255,.42) 72%,
            rgba(255,255,255,.24) 100%
        ),
        url('/images/backgrounds/big-bag-filling.png');

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.bag-hero-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.10;
    background-image:
        linear-gradient(rgba(19,102,140,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(19,102,140,.05) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 82%);
}

.bag-hero h1{
    max-width:650px;
    margin:0 0 24px;
    color:#314954;
    font-size:clamp(3.4rem,5.5vw,5.5rem);
    line-height:.96;
    letter-spacing:-.06em;
    font-weight:700;
}

.bag-dashboard-preview{
    padding:20px;
    border:1px solid #d5e3e9;
    border-radius:22px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 75px rgba(31,65,82,.13);
}

.bag-preview-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:2px 2px 18px;
}

.bag-preview-head span,
.bag-preview-head strong{display:block}

.bag-preview-head span{
    color:#89979d;
    font-size:.63rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bag-preview-head strong{
    margin-top:3px;
    color:#3b5662;
    font-size:.95rem;
}

.bag-preview-live{
    display:flex;
    align-items:center;
    gap:6px;
    color:#74858c;
    font-size:.64rem;
    font-weight:700;
}

.bag-preview-live i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5a9d53;
}

.bag-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.bag-kpi-grid > div{
    min-height:110px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fbfdfe;
}

.bag-kpi-grid span,
.bag-kpi-grid strong,
.bag-kpi-grid small{
    display:block;
}

.bag-kpi-grid span{
    color:#87959c;
    font-size:.59rem;
    font-weight:700;
}

.bag-kpi-grid strong{
    margin:9px 0 4px;
    color:#31576a;
    font-size:1.25rem;
    font-weight:700;
}

.bag-kpi-grid small{
    color:#9ba7ac;
    font-size:.6rem;
}

.bag-quality-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    margin-top:10px;
}

.bag-quality-row > div{
    padding:14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
}

.bag-quality-row span,
.bag-quality-row strong{
    display:block;
}

.bag-quality-row span{
    color:#8b999f;
    font-size:.58rem;
    font-weight:800;
}

.bag-quality-row strong{
    margin-top:5px;
    color:#3e5b68;
    font-size:.86rem;
    font-weight:700;
}

.bag-operations-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.bag-operation-card{
    min-height:210px;
    padding:27px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.bag-operation-card.primary{
    border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--blue));
}

.bag-operation-card span,
.bag-operation-card strong{
    display:block;
}

.bag-operation-card span{
    margin-bottom:28px;
    color:var(--red);
    font-size:.64rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bag-operation-card strong{
    margin-bottom:8px;
    color:#395762;
    font-size:1.35rem;
    font-weight:700;
}

.bag-operation-card p{
    margin:0;
    color:#75858c;
    font-size:.77rem;
    line-height:1.6;
}

.bag-operation-card.primary span,
.bag-operation-card.primary strong,
.bag-operation-card.primary p{
    color:#fff;
}

.bag-operation-card.primary p{opacity:.78}

.bag-quality-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.bag-quality-card{
    min-height:245px;
    padding:30px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.bag-quality-card > span{
    display:block;
    margin-bottom:27px;
    color:var(--red);
    font-size:.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.bag-quality-card strong{
    display:block;
    margin-bottom:9px;
    color:#3b5662;
    font-size:1.08rem;
}

.bag-quality-card p{
    margin:0;
    color:#72828a;
    font-size:.84rem;
    line-height:1.65;
}

.bag-trend-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.bag-trend-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.bag-trend-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
}

.bag-trend-head span{
    color:#3e5965;
    font-size:.8rem;
    font-weight:700;
}

.bag-trend-head small{
    color:#929fa5;
    font-size:.62rem;
}

.bag-trend-image{
    padding: 12px;
    background: #fff;
}

.bag-trend-image img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.bag-production-board{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
    box-shadow:0 16px 44px rgba(31,65,82,.08);
}

.bag-production-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:21px 23px;
    border-bottom:1px solid var(--line);
}

.bag-production-head span{
    color:#3f5965;
    font-size:.8rem;
    font-weight:700;
}

.bag-production-head strong{
    color:#8b989e;
    font-size:.65rem;
    font-weight:700;
}

.bag-bars{
    height:240px;
    display:flex;
    align-items:flex-end;
    gap:9px;
    padding:30px 25px 0;
    background:
        linear-gradient(to top,rgba(220,230,235,.5) 1px,transparent 1px);
    background-size:100% 48px;
}

.bag-bars i{
    flex:1;
    min-height:12px;
    border-radius:5px 5px 0 0;
    background:linear-gradient(180deg,#3999ca,var(--blue2));
}

.bag-production-foot{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:16px 23px 20px;
    color:#87969d;
    font-size:.65rem;
    font-weight:800;
}

.bag-station-table,
.bag-transactions{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.bag-station-row,
.bag-transactions-head,
.bag-transactions-row{
    display:grid;
    grid-template-columns:1.25fr repeat(4,1fr);
    gap:14px;
    align-items:center;
    padding:15px 19px;
    border-bottom:1px solid #edf2f4;
    color:#6e7f87;
    font-size:.74rem;
}

.bag-station-row:last-child,
.bag-transactions-row:last-child{
    border-bottom:none;
}

.bag-station-row.head,
.bag-transactions-head{
    background:#f7fafb;
    color:#405b67;
    font-size:.65rem;
    font-weight:700;
}

.bag-station-row strong,
.bag-transactions-row strong{
    color:#3f5a66;
    font-size:.74rem;
}

.bag-filter-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
    margin-bottom:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.bag-filter-strip > div{
    min-height:105px;
    padding:20px;
    border-right:1px solid var(--line);
}

.bag-filter-strip > div:last-child{border-right:none}

.bag-filter-strip span,
.bag-filter-strip strong{
    display:block;
}

.bag-filter-strip span{
    color:#89979d;
    font-size:.61rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.bag-filter-strip strong{
    margin-top:7px;
    color:#405b67;
    font-size:.76rem;
}

.bag-filter-strip .export{
    background:#f3f8fa;
}

.bag-filter-strip .export strong{
    color:var(--blue2);
}

.bag-transactions .status{
    justify-self:start;
    padding:5px 8px;
    border-radius:999px;
    font-size:.6rem;
    font-weight:700;
}

.bag-transactions .status.completed{
    background:#e9f5eb;
    color:#4d8150;
}

.bag-transactions .status.active{
    background:#eaf4fb;
    color:var(--blue2);
}

@media(max-width:1100px){
    .bag-operations-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:991px){
    .bag-hero{padding:75px 0}
    .bag-dashboard-preview{margin-top:18px}
    .bag-kpi-grid,
    .bag-quality-row{grid-template-columns:repeat(2,1fr)}
    .bag-filter-strip{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:767px){
    .bag-operations-grid,
    .bag-quality-grid,
    .bag-trend-grid,
    .bag-kpi-grid,
    .bag-quality-row,
    .bag-filter-strip{
        grid-template-columns:1fr;
    }

    .bag-filter-strip > div{
        border-right:none;
        border-bottom:1px solid var(--line);
    }

    .bag-filter-strip > div:last-child{border-bottom:none}

    .bag-station-row,
    .bag-transactions-head,
    .bag-transactions-row{
        grid-template-columns:1.2fr 1fr;
    }

    .bag-station-row > *:nth-child(n+3),
    .bag-transactions-row > *:nth-child(n+3){
        grid-column:2;
    }

    .bag-station-row.head > *:nth-child(n+3),
    .bag-transactions-head > *:nth-child(n+3){
        display:none;
    }

    .bag-production-foot{
        flex-direction:column;
        gap:4px;
    }
}


/* Big Bag hero background positioning */
@media(max-width:991px){
    .bag-hero{
        background-position:68% center;
    }
}

@media(max-width:767px){
    .bag-hero{
        background-image:
            linear-gradient(
                90deg,
                rgba(255,255,255,.97) 0%,
                rgba(255,255,255,.93) 48%,
                rgba(255,255,255,.72) 78%,
                rgba(255,255,255,.55) 100%
            ),
            url('/images/backgrounds/big-bag-filling.png');

        background-position:72% center;
    }
}


/* =========================================================
   PLATFORM LOGIN
   Append to /wwwroot/css/platform.css
   ========================================================= */

.platform-login-page {
    position: relative;
    overflow: hidden;
    padding: 90px 0 105px;
    background: radial-gradient(circle at 92% 18%,rgba(0,124,193,.08),transparent 30%), linear-gradient(180deg,#fff 0%,#f5f9fb 100%);
}

.platform-login-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: linear-gradient(rgba(19,102,140,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(19,102,140,.035) 1px,transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 82%);
}

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

.platform-login-shell {
    display: grid;
    grid-template-columns: minmax(0,1.02fr) minmax(430px,.78fr);
    gap: 80px;
    align-items: center;
}

.platform-login-intro {
    max-width: 700px;
}

    .platform-login-intro h1 {
        max-width: 700px;
        margin: 0 0 25px;
        color: #314954;
        font-size: clamp(3.6rem,5.5vw,6.2rem);
        line-height: .94;
        letter-spacing: -.06em;
        font-weight: 900;
    }

.platform-login-lead {
    max-width: 625px;
    margin: 0;
    color: #687b84;
    font-size: 1rem;
    line-height: 1.75;
}

.platform-login-points {
    margin-top: 45px;
    border-top: 1px solid var(--line);
}

    .platform-login-points > div {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 18px;
        padding: 20px 0;
        border-bottom: 1px solid var(--line);
    }

        .platform-login-points > div > span {
            padding-top: 2px;
            color: var(--red);
            font-size: .63rem;
            font-weight: 900;
        }

    .platform-login-points strong {
        display: block;
        color: #405b67;
        font-size: .79rem;
        font-weight: 900;
    }

    .platform-login-points p {
        max-width: 520px;
        margin: 5px 0 0;
        color: #809097;
        font-size: .72rem;
        line-height: 1.55;
    }

.platform-login-panel {
    position: relative;
}

    .platform-login-panel::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        top: -45px;
        right: -45px;
        border-radius: 50%;
        background: rgba(0,124,193,.055);
        z-index: 0;
    }

.platform-login-panel-inner {
    position: relative;
    z-index: 1;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 25px 70px rgba(31,65,82,.10);
}

.platform-login-panel-head {
    margin-bottom: 31px;
}

    .platform-login-panel-head h2 {
        margin: 0;
        color: #314954;
        font-size: clamp(2.4rem,3.7vw,3.7rem);
        line-height: 1;
        letter-spacing: -.055em;
        font-weight: 900;
    }

    .platform-login-panel-head p {
        margin: 12px 0 0;
        color: #7d8d94;
        font-size: .78rem;
        line-height: 1.6;
    }


/* ---------------------------------------------------------
   SYNCFUSION
   The wrapper is ours; everything beneath is generated by
   SfDataForm, so these selectors do not depend on CssClass.
   --------------------------------------------------------- */

.platform-login-form .e-data-form {
    width: 100% !important;
}

.platform-login-form .e-form-layout {
    display: block !important;
}

.platform-login-form .e-colspan-2,
.platform-login-form .e-colspan-1 {
    width: 100% !important;
    max-width: none !important;
}

.platform-login-form .e-label-position-top {
    margin-bottom: 20px !important;
}

.platform-login-form .e-form-label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #526873 !important;
    font-family: Muli,"Helvetica Neue",Arial,sans-serif !important;
    font-size: .67rem !important;
    font-weight: 900 !important;
}

.platform-login-form .e-form-item-wrapper {
    width: 100% !important;
}

.platform-login-form .e-form-item {
    width: 100% !important;
}

.platform-login-form .e-input-group,
.platform-login-form .e-input-group.e-control-wrapper {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    background: #fbfdfe !important;
    box-shadow: none !important;
}

    .platform-login-form .e-input-group::before,
    .platform-login-form .e-input-group::after {
        display: none !important;
    }

    .platform-login-form .e-input-group:hover {
        border-color: #bed2dc !important;
    }

    .platform-login-form .e-input-group.e-input-focus,
    .platform-login-form .e-input-group:focus-within {
        border-color: var(--blue) !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(0,124,193,.07) !important;
    }

.platform-login-form input.e-input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 !important;
    color: #3e5965 !important;
    background: transparent !important;
    font-family: Muli,"Helvetica Neue",Arial,sans-serif !important;
    font-size: .8rem !important;
}

.platform-login-form .e-clear-icon {
    opacity: .45;
}

.platform-login-form .e-error {
    margin-top: 5px !important;
    color: var(--red) !important;
    font-size: .61rem !important;
}

.platform-login-form .e-button-right {
    width: 100% !important;
    display: block !important;
}

.platform-login-form .platform-login-submit.e-btn,
.platform-login-form .platform-login-submit {
    width: 100% !important;
    min-height: 52px !important;
    margin: 3px 0 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg,var(--blue2),var(--blue)) !important;
    color: #fff !important;
    font-family: Muli,"Helvetica Neue",Arial,sans-serif !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 28px rgba(0,124,193,.18) !important;
    transition: transform .18s ease,box-shadow .18s ease;
}

    .platform-login-form .platform-login-submit.e-btn:hover,
    .platform-login-form .platform-login-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(0,124,193,.24) !important;
    }

.platform-login-error {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 17px;
    padding: 13px 14px;
    border: 1px solid #edcccc;
    border-radius: 11px;
    background: #fff8f8;
}

    .platform-login-error > span {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #f8dddd;
        color: var(--red);
        font-size: .7rem;
        font-weight: 900;
    }

    .platform-login-error p {
        margin: 3px 0 0;
        color: #925050;
        font-size: .66rem;
        line-height: 1.5;
    }

.platform-login-help {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 26px;
    padding-top: 21px;
    border-top: 1px solid var(--line);
    font-size: .62rem;
}

    .platform-login-help span {
        color: #909da3;
    }

    .platform-login-help a {
        color: var(--blue2);
        font-weight: 900;
        text-decoration: none;
    }

.platform-login-security {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    color: #99a5aa;
    font-size: .59rem;
}

    .platform-login-security i {
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #5b9553;
        box-shadow: 0 0 0 4px rgba(84,130,53,.09);
    }

@media(max-width:1100px) {
    .platform-login-shell {
        grid-template-columns: 1fr 430px;
        gap: 45px;
    }

    .platform-login-intro h1 {
        font-size: clamp(3.2rem,5vw,5rem);
    }
}

@media(max-width:991px) {
    .platform-login-page {
        padding: 70px 0 80px;
    }

    .platform-login-shell {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto;
    }

    .platform-login-intro {
        max-width: none;
    }

        .platform-login-intro h1 {
            max-width: 620px;
        }

    .platform-login-points {
        display: none;
    }


}

@media(max-width:575px) {
    .platform-login-page {
        padding: 48px 0 60px;
    }

    .platform-login-intro h1 {
        font-size: clamp(2.9rem,14vw,4rem);
    }

    .platform-login-lead {
        font-size: .87rem;
    }

    .platform-login-panel-inner {
        padding: 29px 22px;
        border-radius: 15px;
    }

    .platform-login-help {
        display: block;
    }

        .platform-login-help a {
            display: block;
            margin-top: 7px;
        }
}

/* Remove the native border/outline from Syncfusion login inputs */
.platform-login-form input.e-input,
.platform-login-form input.e-input:focus,
.platform-login-form .e-input-group input.e-input,
.platform-login-form .e-input-group input.e-input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;
}

/* Keep an accessible focus indicator around the complete field */
.platform-login-form .e-input-group:focus-within,
.platform-login-form .e-input-group.e-input-focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(31, 133, 190, 0.14) !important;
    outline: none !important;
}

/* =========================================================
   LOGOUT PAGE
========================================================= */

.platform-logout-page {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 650px;
    padding: 100px 0 110px;
    background: radial-gradient( circle at 82% 18%, rgba(0, 124, 193, .09), transparent 30% ), linear-gradient( 180deg, #fff 0%, #f5f9fb 100% );
}

.platform-logout-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: linear-gradient( rgba(19, 102, 140, .035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(19, 102, 140, .035) 1px, transparent 1px );
    background-size: 54px 54px;
    mask-image: linear-gradient( 90deg, transparent 0%, #000 50%, transparent 100% );
}

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

.platform-logout-card {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 58px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 80px rgba(31, 65, 82, .11);
    text-align: center;
}

.platform-logout-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: rgba(84, 130, 53, .10);
    color: var(--green);
}

    .platform-logout-icon span {
        font-size: 1.55rem;
        font-weight: 900;
    }

.platform-logout-eyebrow {
    justify-content: center;
}

.platform-logout-card h1 {
    margin: 0;
    color: #314954;
    font-size: clamp(3rem, 5vw, 4.7rem);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 900;
}

.platform-logout-copy {
    max-width: 510px;
    margin: 24px auto 0;
    color: #687b84;
    font-size: .95rem;
    line-height: 1.75;
}

.platform-logout-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    padding: 10px 15px;
    border: 1px solid rgba(84, 130, 53, .20);
    border-radius: 999px;
    background: rgba(84, 130, 53, .055);
    color: #61736a;
    font-size: .68rem;
    font-weight: 800;
}

    .platform-logout-status i {
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 4px rgba(84, 130, 53, .10);
    }

.platform-logout-button {
    text-decoration: none;
}

    .platform-logout-button:hover {
        color: #fff;
    }

.platform-logout-button {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding: 13px 24px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--blue2), var(--blue));
    box-shadow: 0 12px 28px rgba(0, 124, 193, .18);
    color: #fff;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .platform-logout-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 16px 34px rgba(0, 124, 193, .25);
    }

    .platform-logout-button:disabled {
        cursor: wait;
        opacity: .72;
    }

.platform-logout-help {
    margin: 23px 0 0;
    color: #909da3;
    font-size: .65rem;
}

    .platform-logout-help a {
        margin-left: 4px;
        color: var(--blue2);
        font-weight: 900;
        text-decoration: none;
    }

        .platform-logout-help a:hover {
            color: var(--blue);
        }

@media (max-width: 767px) {
    .platform-logout-page {
        min-height: 560px;
        padding: 70px 0 80px;
    }

    .platform-logout-card {
        padding: 43px 30px;
        border-radius: 18px;
    }
}

@media (max-width: 575px) {
    .platform-logout-page {
        padding: 48px 0 60px;
    }

    .platform-logout-card {
        padding: 38px 22px;
        border-radius: 15px;
    }

        .platform-logout-card h1 {
            font-size: clamp(2.8rem, 14vw, 3.8rem);
        }
}