/* =====================================================
   ARGUS SENTINEL — PLATFORM PAGE
   Navbar, footer, .container and shared tokens come from
   general.css. Only platform-page rules live here.
   ===================================================== */

/* The shared palette lives in general.css under .pim-page.
   Only the tokens unique to this page are declared here. */
main {
    --line: rgba(23, 35, 111, 0.08);
}
main svg {
    display: block;
    max-width: 100%;
}
/*===================ICONS=====================*/
.icon-asset {
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
}
.icon-asset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.node-icon.icon-asset {
    width: 64px;
    height: 64px;
}
.feature-icon.icon-asset {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
.system-icon.icon-asset {
    width: 72px;
    height: 72px;
    margin: 0 auto 17px;
}
.step-icon.icon-asset {
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 16px; overflow: hidden;
    background: transparent;
}
/*===================BRAND SHIELD=====================*/
/*===================BUTTONS=====================*/
/*===================EYEBROW=====================*/
/* .eyebrow itself comes from general.css, so it matches the home page.
   Only the dark-band variant is defined here. */
/*===================SECTION SHELL=====================*/
.section {
    padding-top: 105px;
}
.hero,.capabilities,.architecture,.pipeline,.use-case {
    background: var(--background);
}
.capabilities {
    padding: 78px 0 84px;
    border-top: 1px solid var(--line);
}
.architecture {
    padding: 84px 0 82px;
}
.pipeline {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* Heading on top, supporting copy underneath — never side by side. */
.section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 45px;
}
.section-heading h2,.pipeline h2 {
    margin: 15px 0 18px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text);
}
.section-heading > p {
    width: auto;
    max-width: 620px;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}
.capabilities .section-heading {
    margin-bottom: 32px;
}
/* this one is centred as well as stacked */
.architecture .section-heading {
    align-items: center;
    gap: 18px;
    margin-bottom: 34px;
    text-align: center;
}
.capabilities .section-heading h2 {
    max-width: 760px;
    font-size: clamp(40px, 3.7vw, 54px);
}
.architecture .section-heading h2 {
    max-width: 970px;
    font-size: clamp(42px, 4vw, 58px);
}
.capabilities .section-heading > p {
    max-width: 620px;
    padding-top: 0;
}
.architecture .section-heading > p {
    width: auto;
    max-width: 620px;
    margin: 0 auto;
    padding-top: 0;
}
.architecture .section-heading .eyebrow {
    margin-inline: auto;
}
/*===================HERO=====================*/
.hero {
    padding: 3rem 0 5rem;
    overflow: hidden;
}
.hero-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    align-items: center;
    gap: 72px;
}
.hero-content h1 {
    max-width: 660px;
    margin: 1rem 0 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--text);
}
/* the colour itself comes from .gradient in general.css */
.hero-content h1 span {
    display: block;
}
.hero-description {
    max-width: 450px;
    margin: 24px 0 27px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/*===================HERO ARCHITECTURE=====================*/
.hero-architecture {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr;
    align-items: center;
    gap: 8px;
    min-height: 430px;
    padding: 50px 29px 70px;
    overflow: hidden;
    border: 1px solid rgba(23, 35, 111, 0.12);
    border-radius: 28px;
    color: var(--white);
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 10%, #143b60, var(--navy) 62%);
    background-size: 30px 30px, 30px 30px, auto;
    box-shadow: 0 24px 60px rgba(18, 29, 86, 0.16);
}
.architecture-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 250px;
    padding: 22px 13px;
    border: 1px solid #34536f;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(160deg, rgba(17, 51, 81, 0.88), rgba(7, 27, 47, 0.95));
}
.featured-node {
    border-color: #317089;
    box-shadow: inset 0 0 35px rgba(16, 199, 232, 0.06);
}
.node-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border: 1px solid #406785;
    border-radius: 9px;
    color: #66e7ad;
    background: #0d2944;
    font-size: 21px;
}
.architecture-node h3 {
    margin: 16px 0 10px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #10a7c4;
}
.architecture-node p {
    margin: 0;
    color: #a5b5c4;
    font-size: 10px;
}
.node-connection {
    display: grid;
    justify-items: center;
    text-align: center;
}
.node-connection small {
    min-height: 34px;
    color: #bcc9d4;
    font-size: 8px;
}
.node-connection span {
    color: var(--cyan);
    font-size: 25px;
}
.feedback-line {
    position: absolute;
    right: 10%;
    bottom: 27px;
    left: 17%;
    height: 58px;
    padding-top: 24px;
    border-right: 1px dashed rgba(35, 201, 128, 0.75);
    border-bottom: 1px dashed rgba(35, 201, 128, 0.75);
    border-left: 1px dashed rgba(35, 201, 128, 0.75);
    border-radius: 0 0 10px 10px;
    color: #6ce4a8;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1.4;
    pointer-events: none;
}

    .feedback-line span {
        color: inherit;
        font: inherit;
        text-align: center;
        white-space: nowrap;
    }
/*===================FEATURE STRIP=====================*/
.feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 38px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}
.feature-strip article {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 21px 19px;
}
.feature-strip article + article {
    border-left: 1px solid var(--border);
}
.feature-icon {
    display: grid;
    place-items: center;
    width: 42px;
    flex: 0 0 42px;
    color: var(--blue);
    font-size: 23px;
}
.feature-strip h3 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    line-height: 1.3;
}
.feature-strip p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}
/*===================CAPABILITY CARDS=====================*/
.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.capability-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 36px rgba(26, 38, 93, 0.045);
}
.capability-card > p {
    margin: 14px 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}
.card-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.status-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(35, 201, 128, 0.09);
}
.status-dot.blue {
    background: var(--blue);
    box-shadow: 0 0 0 6px rgba(22, 139, 255, 0.09);
}
.card-heading small {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 9px;
    font-weight: 800;
}
.card-heading h3 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--text);
}
/*===================CARD — CHART=====================*/
.chart-block {
    width: 100%;
    height: 160px;
    margin-top: auto;
    padding: 12px 15px 8px;
    overflow: hidden;
    border: 1px solid #e4ebef;
    border-radius: 10px;
    background:
        linear-gradient(#eef3f6 1px, transparent 1px),
        linear-gradient(90deg, #eef3f6 1px, transparent 1px),
        linear-gradient(180deg, #f9fcfd, #ffffff);
    background-size: 100% 40px, 75px 100%, auto;
}
.chart-title {
    color: #6d7e90;
    font-size: 8px;
}
.line-chart {
    width: 100%;
    height: 105px;
}
.chart-area {
    fill: url("#chartFill");
}
.chart-line {
    fill: none;
    stroke: var(--blue);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chart-axis {
    display: flex;
    justify-content: space-between;
    color: #8796a5;
    font-size: 7px;
}
/*===================CARD — TAGS=====================*/
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}
.tags span {
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: #718195;
    background: #fafcfd;
    font-size: 8px;
}
/*===================CARD — TABLES AND REASONS=====================*/
.information-table {
    width: 82%;
    margin: auto auto 0;
    padding: 12px 15px;
    border: 1px solid #dfe8ed;
    border-radius: 9px;
    background: #fbfdfd;
}
.information-table > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 30px;
    padding: 7px 3px;
    border-bottom: 1px solid #e8eef1;
    color: #68798b;
    font-size: 9px;
}
.information-table > div:last-child {
    border-bottom: 0;
}
.information-table strong {
    color: var(--green);
    font-size: 9px;
}
.information-table .danger {
    color: var(--red);
}
.information-table .warning {
    color: var(--orange);
}
    .information-table .neutral {
        color: #778799;
    }

/* ---------- Containment card: the blocked-app screen, no handset ---------- */
/* Same screen the Solutions page shows inside a phone case (.blocked-screen
   there), rebuilt here as a screen in a bare bezel — the handset's edge without
   its notch or speaker. */
/* the bezel: the handset's side rails only — the screen runs right off the top
   and bottom, the way it does on the cropped handset in the card beside it */
.blocked-shell {
    width: 100%;
    /* the same overall height as that handset, so the two cards stay level */
    min-height: 250px;
    margin: 12px 0 0;
    padding: 0 8px;
    border-radius: 0;
    background: linear-gradient(251deg, #000000 0%, #090f3a 40%, #000000 100%);
    /* no inset hairline: with no vertical padding it would draw a line across
       the top and bottom of the screen itself */
    box-shadow: 0 18px 34px rgba(8, 34, 64, 0.22);
}

/* the screen inside it */
.blocked-notice {
    width: 100%;
    min-height: 250px;
    padding: 12px 18px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
    /* the faint glow behind the shield, as on the handset */
    background: radial-gradient(circle at 50% 4%, #182456, #070b1e 70%);
    text-align: center;
}

    .blocked-notice-shield {
        display: block;
        width: 34px;
        height: 34px;
        margin-bottom: 7px;
        color: #ffffff;
    }

    .capability-card .blocked-notice strong {
        margin-bottom: 3px;
        color: #ef3b3b;
        font-family: "Manrope", sans-serif;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
    }

    .capability-card .blocked-notice b {
        margin-bottom: 5px;
        color: #ffffff;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
    }

    .capability-card .blocked-notice p {
        max-width: 262px;
        margin: 0 0 10px;
        color: #9a9ca8;
        font-size: 10px;
        line-height: 1.55;
    }

    /* decorative — they mirror the app's buttons, they are not controls */
    .blocked-notice-primary,
    .blocked-notice-danger {
        display: block;
        width: 100%;
        padding: 7px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
    }

    .blocked-notice-primary {
        margin-bottom: 6px;
        color: #ffffff;
        background: #1b3fa8;
    }

    .blocked-notice-danger {
        color: #e5484d;
        background: #4a1315;
    }

/* ---------- Explainability card: the app's own screen, half shown ---------- */
/* The card used to hold a hand-drawn "Why this is risky" summary. It now shows
   the real explanation screen from the phone mockup (markup and .tp-* styling
   shared with the Home and Mobile pages, in general.css), cropped so only the
   lower half of the handset is in frame. */
.reason-phone {
    position: relative;
    /* How much of the handset is in frame. Sized against the numbers below so
       the crop lands right on the top edge of the analysis card: the visible
       run is (panel + 16px bezel) x scale, and 200px of that leaves exactly the
       panel's own 12px of padding clipped away. */
    height: 250px;
    /* the panel this replaced was pushed to the card's bottom with margin-top:
       auto, which left a wide empty band under the paragraph */
    margin: 10px 0 0;
    overflow: hidden;
}

    .reason-phone .phoneShell {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 300px;
        margin-left: -150px;
        padding: 8px;
        border-radius: 0 0 27px 27px;
        /* .is-flat drops the 3D tilt; scaling from the bottom edge keeps the
           handset's foot pinned to the bottom of the frame as it shrinks */
        transform: scale(0.82);
        transform-origin: bottom center;
        box-shadow: 0 18px 34px rgba(8, 34, 64, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }

    /* the glass-glare overlay carries its own radius from general.css */
    .reason-phone .phoneShell::after {
        border-radius: 0 0 27px 27px;
    }

    .reason-phone .threatPanel {
        height: 301px;
        border-radius: 0 0 21px 21px;
    }

    /* the analysis card sits right on the cut, so its top corners square off
       too — the crop reads as one straight line rather than three curves */
    .reason-phone .tp-scroll > .tp-card:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* decorative only — nothing in here is meant to be clicked */
    .reason-phone .tp-actions button {
        cursor: default;
        pointer-events: none;
    }

@media (max-width: 1024px) {
    .reason-phone {
        height: 214px;
    }

    .reason-phone .threatPanel {
        height: 256px;
    }
}

/* Signal correlation diagram */
.signal-correlation-visual {
    width: 100%;
    /* narrower than the card so it reads as a figure sitting inside it, and
       auto on every side centres it in the space the copy leaves behind */
    max-width: 88%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .signal-correlation-visual img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

/*===================CARD — RISK SCORE=====================*/
.dark-card {
    color: var(--white);
    border-color: var(--navy-light);
    background: var(--navy);
    box-shadow: 0 18px 45px rgba(23, 35, 111, 0.16);
}
.dark-card > p,.dark-card .card-heading h3 {
    color: #fff;
}
.risk-score {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin: auto auto 10px;
    border-radius: 50%;
    background: conic-gradient(var(--red) 0deg 313deg, #294359 313deg 360deg);
}
.risk-score::after {
    content: "";
    position: absolute;
    inset: 17px;
    border-radius: 50%;
    background: #091c30;
}
.risk-score-content {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}
.risk-score strong {
    font-family: "Manrope", sans-serif;
    font-size: 46px;
    line-height: 1;
}
.risk-score small {
    color: #b6c3ce;
    font-size: 9px;
}
.risk-label {
    width: 105px;
    margin: 0 auto 3px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 91, 97, 0.55);
    border-radius: 4px;
    color: #ff898e;
    background: rgba(255, 91, 97, 0.1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 8px;
    font-weight: 800;
}
/*===================CONNECTED ARCHITECTURE=====================*/
.connected-system {
    display: grid;
    grid-template-columns: 1fr 90px 1fr 90px 1fr;
    align-items: center;
    gap: 20px;
    min-height: 330px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(26, 38, 93, 0.045);
}
.connected-system article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 245px;
    padding: 28px 24px;
    border: 1px solid #d9e5eb;
    border-radius: 11px;
    text-align: center;
    background: var(--white);
}
.connected-system article.cloud-node {
    border-color: #a3e1f0;
    background: #f4fcfe;
}
.system-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--blue);
    background: #edf8ff;
    font-size: 23px;
}
.connected-system article > small {
    display: block;
    margin: 0 0 8px;
    color: #65758a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}
.connected-system h3 {
    margin: 0 0 9px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.3;
}
.connected-system p {
    max-width: 250px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}
.system-arrow {
    text-align: center;
}
.system-arrow small {
    display: block;
    margin-bottom: 9px;
    color: #7a8b9e;
    font-size: 11px;
    line-height: 1.4;
}
.system-arrow strong {
    color: var(--blue);
    font-size: 32px;
}
.architecture-legend {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}
/* The original six-cell legend. The marquee reuses the .architecture-legend
   class for its shell, so this has to exclude it — otherwise this padding lands
   on .architecture-marquee__icon (also a <span>, and this selector outranks it),
   squashing the tile's content box to 30x18 and pushing the 34px icon out the
   bottom of the square. */
.architecture-legend:not(.architecture-marquee) span {
    padding: 16px 10px;
    text-align: center;
}
.architecture-legend b,.architecture-legend small {
    display: block;
}
.architecture-legend b {
    color: #34485c;
    font-size: 12px;
}
.architecture-legend small {
    margin-top: 4px;
    color: #8594a3;
    font-size: 10px;
    line-height: 1.4;
}
/*===================PIPELINE=====================*/
.pipeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
/* The line runs centre-to-centre between the first and last step markers.
   Each of the 5 columns is 20% wide and its 36px marker sits at the left
   edge, so the centres are at 18px and 80% + 18px. The old 8%/8% inset
   started the line to the right of "01", leaving it detached. */
    .pipeline-grid::before {
        content: "";
        position: absolute;
        top: 18px;

        left: 10%;
        right: 10%;
        border-top: 1px dashed var(--cyan);
        z-index: 0;
        pointer-events: none;
    }
.pipeline-grid article {
    position: relative;
    padding-right: 30px;
}
.step-number {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 5px solid #e4f7fa;
    border-radius: 50%;
    color: var(--white);
    background: var(--cyan);
    font-size: 8px;
    font-weight: 800;
}
.step-number.green {
    border-color: #dff7eb;
    background: var(--green);
}
.step-icon {
    display: grid;
    place-items: center;
    width: 61px;
    height: 61px;
    margin: 20px 0 17px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: var(--background);
    font-size: 22px;
}
.pipeline-grid h3 {
    margin: 0 0 6px;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
}
.pipeline-grid p {
    max-width: 165px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}
/*===================USE CASE=====================*/
.use-case-panel {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr;
    align-items: stretch;
    gap: 52px;
    padding: 42px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 36px rgba(26, 38, 93, 0.045);
}
.use-case-panel ol {
    display: grid;
    align-content: center;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.use-case-panel li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.use-case-panel li > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    color: #15975c;
    background: #e3f8ee;
    font-size: 14px;
    font-weight: 800;
}
.use-case-panel li strong {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.4;
}
.use-case-panel li p {
    max-width: 500px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}
.incident-card {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 36px rgba(26, 38, 93, 0.045);
}
.incident-labels {
    display: flex;
    justify-content: space-between;
}
.incident-labels span {
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 800;
}
.incident-labels small {
    color: var(--green);
    font-size: 11px;
}
.incident-card h3 {
    margin: 18px 0 24px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
}
.incident-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.incident-metrics > div {
    padding: 22px;
    border-right: 1px solid var(--border);
}
.incident-metrics strong,.incident-metrics small {
    display: block;
}
.incident-metrics strong {
    font-family: "Manrope", sans-serif;
    font-size: 38px;
    line-height: 1;
}
.incident-metrics small {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}
.incident-metrics .incident-shield {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: auto;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: radial-gradient(
        circle,
        var(--red) 0 31%,
        rgba(255, 91, 97, 0.18) 33% 55%,
        rgba(255, 91, 97, 0.06) 57%
    );
    font-size: 20px;
    font-weight: 800;
}
.use-case .tags {
    margin: 18px 0;
    gap: 9px;
}
.use-case .tags span {
    padding: 7px 12px;
    font-size: 11px;
}
.incident-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.incident-actions button {
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
}
.incident-actions .danger-button {
    border-color: var(--red);
    color: var(--white);
    background: var(--red);
}
/*===================DEMO CTA=====================*/
/* Matches .contact-inner-band on the home page: centred column,
   left-to-right navy gradient, white text, white pill button. */
/* =====================================================
   DYNAMIC LAYOUT
   ===================================================== */
@media (max-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }
    .hero-content {
        max-width: 720px;
    }
    .hero-content h1 br {
        display: none;
    }
    .capabilities,.architecture {
        padding: 70px 0 72px;
    }
    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .connected-system {
        grid-template-columns: 1fr 54px 1fr 54px 1fr;
        gap: 12px;
        padding: 24px;
    }
    .connected-system article {
        min-height: 230px;
        padding: 24px 18px;
    }
    .pipeline-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 0;
    }
    .pipeline-grid::before {
        display: none;
    }
    .use-case-panel {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px;
    }
    .use-case-panel ol {
        gap: 26px;
    }
}
@media (max-width: 780px) {
    .section {
        padding: 1rem 0;
    }
    .hero {
        padding-top: 1rem;
    }
    .hero-content h1 {
        font-size: 44px;
    }
    .hero-architecture {
        grid-template-columns: 1fr;
        min-height: 720px;
        padding: 30px;
    }
    .architecture-node {
        width: 100%;
        min-height: 170px;
    }
    .node-connection {
        height: 35px;
        transform: rotate(90deg);
    }
    .node-connection small,.feedback-line {
        display: none;
    }
    .feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-strip article:nth-child(3) {
        border-top: 1px solid var(--border);
        border-left: 0;
    }
    .feature-strip article:nth-child(4) {
        border-top: 1px solid var(--border);
    }
    .section-heading > p {
        max-width: 520px;
    }
    .capabilities .section-heading,.architecture .section-heading {
        margin-bottom: 28px;
    }
    .capability-grid {
        grid-template-columns: 1fr;
    }
    .capability-card {
        min-height: 360px;
    }
    .information-table {
        width: 88%;
    }
    .connected-system {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .connected-system article {
        min-height: 215px;
    }
    /* The arrow's vertical arrangement is handled by the max-width:1000px block
       further down, which rotates the arrow glyph alone and keeps the label
       upright. Rotating the whole .system-arrow here as well stacked a second
       90deg on the glyph — it ended up pointing back at the card above, with
       the label reading sideways. */
    .architecture-legend {
        grid-template-columns: repeat(2, 1fr);
    }
    .pipeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .hero-content h1 {
        font-size: 39px;
    }
    .hero-description {
        font-size: 14px;
    }
    .button-group {
        flex-direction: column;
        /* without this the column stretches the button across the row */
        align-items: flex-start;
    }
    .hero-architecture {
        padding: 25px 20px;
    }
    .feature-strip {
        grid-template-columns: 1fr;
    }
    .feature-strip article + article {
        border-top: 1px solid var(--border);
        border-left: 0;
    }
    .section-heading h2 {
        font-size: 38px;
    }
    .capability-card {
        min-height: auto;
        padding: 24px;
    }
    .information-table {
        width: 100%;
        margin-top: 18px;
    }
    .dark-card {
        min-height: 390px;
    }
    .architecture-legend {
        grid-template-columns: repeat(2, 1fr);
    }
    .pipeline-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .pipeline-grid article {
        display: grid;
        grid-template-columns: 42px 70px 1fr;
        align-items: center;
        padding-right: 0;
    }
    .step-icon {
        margin: 0;
    }
    .pipeline-grid h3,.pipeline-grid p {
        grid-column: 3;
    }
    /* the icon and its number stand beside the whole text block and centre
       against it, so the heading and its description stay together */
    .pipeline-grid .step-number,
    .pipeline-grid .step-icon {
        grid-row: 1 / span 2;
        align-self: center;
    }
    .pipeline-grid h3 {
        align-self: end;
    }
    .pipeline-grid p {
        align-self: start;
    }
    .use-case-panel,.incident-card {
        padding: 22px;
    }
    .incident-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .incident-metrics > div {
        padding: 16px;
    }
    .incident-metrics strong {
        font-size: 32px;
    }
    .incident-shield {
        display: none !important;
    }
    .incident-actions {
        flex-direction: column;
    }
}


/*===================HEADER GAP=====================*/
/* One consistent distance between the sticky header and the first line of the
   page, matching Home. Appended last so it settles the several earlier rules
   that were each setting this differently. */
.hero {
    padding-top: 48px;
}

@media (max-width: 820px) {
    .hero {
        padding-top: 26px;
    }
}

@media (max-width: 620px) {
    /* .container picks up margin-top: 1rem here, which covers most of the gap */
    .hero {
        padding-top: 4px;
    }
}
/* =====================================================
   PLATFORM — INTERACTION AND SIGNAL MARQUEE

/* ---------- Moving signal strip ---------- */

.architecture-legend.architecture-marquee {
    position: relative;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 35, 111, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 35px rgba(15, 35, 70, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.architecture-marquee__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    border-right: 1px solid rgba(23, 35, 111, 0.14);
    color: #17236f;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.architecture-marquee__viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 5%, #000 95%, transparent 100% );
    mask-image: linear-gradient( 90deg, transparent 0, #000 5%, #000 95%, transparent 100% );
}

.architecture-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: platform-signal-scroll 30s linear infinite;
}

.architecture-marquee__group {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-shrink: 0;
    padding: 16px 14px 16px 0;
}

.architecture-marquee__item {
    position: relative;
    display: flex;
    flex: 0 0 158px;
    min-height: 122px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 16px 12px;
    border: 1px solid rgba(16, 167, 196, 0.20);
    border-radius: 14px;
    background: rgba(249, 253, 254, 0.96);
    text-align: center;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.architecture-marquee__icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    margin-bottom: 5px;
    border: 1px solid rgba(16, 167, 196, 0.24);
    border-radius: 13px;
    background: #effafd;
}

    .architecture-marquee__icon img {
        display: block;
        width: 34px;
        height: 34px;
        object-fit: contain;
        transition: transform 220ms ease;
    }

.architecture-marquee__item strong {
    display: block;
    color: #17236f;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.3;
}

.architecture-marquee__item small {
    display: block;
    margin: 0;
    color: #708096;
    font-size: 0.71rem;
    line-height: 1.45;
}

/* หยุดเลื่อนเมื่อเอาเมาส์วางหรือเลือกด้วยคีย์บอร์ด */
.architecture-marquee:hover .architecture-marquee__track,
.architecture-marquee:focus .architecture-marquee__track,
.architecture-marquee:focus-within .architecture-marquee__track {
    animation-play-state: paused;
}

@keyframes platform-signal-scroll {
    from {
        transform: translateX(0);
    }

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

/* ---------- Professional hover interactions ---------- */

.architecture-node,
.feature-strip article,
.capability-card,
.pipeline-grid article,
.use-case-panel,
.use-case-panel li,
.incident-card,
.architecture-marquee__item {
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

    .node-icon img,
    .icon-asset img,
    .step-icon img,
    .capability-card img,
    .pipeline-grid img {
        transition: transform 220ms ease, filter 220ms ease;
    }

@media (hover: hover) and (pointer: fine) {

    .architecture-node:hover,
    .feature-strip article:hover,
    .capability-card:hover,
    .pipeline-grid article:hover,
    .incident-card:hover {
        z-index: 2;
        transform: translateY(-7px);
        border-color: rgba(16, 167, 196, 0.55);
        box-shadow: 0 18px 38px rgba(8, 34, 64, 0.12), 0 5px 14px rgba(16, 167, 196, 0.08);
    }

        .architecture-node:hover .node-icon img,
        .feature-strip article:hover img,
        .capability-card:hover img,
        .pipeline-grid article:hover img {
            transform: scale(1.07);
        }

    .architecture-marquee__item:hover {
        z-index: 2;
        transform: translateY(-5px);
        border-color: rgba(16, 167, 196, 0.58);
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(8, 34, 64, 0.10), 0 3px 9px rgba(16, 167, 196, 0.08);
    }

        .architecture-marquee__item:hover
        .architecture-marquee__icon img {
            transform: scale(1.10);
        }

    .use-case-panel li:hover {
        transform: translateX(5px);
        background: rgba(16, 167, 196, 0.055);
    }

    .architecture-node:hover h3,
    .capability-card:hover h3,
    .pipeline-grid article:hover h3 {
        color: #10a7c4;
    }
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .architecture-legend.architecture-marquee {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .architecture-marquee__label {
        padding-inline: 14px;
        font-size: 0.70rem;
    }

    .architecture-marquee__item {
        flex-basis: 148px;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .architecture-legend.architecture-marquee {
        display: block;
        border-radius: 15px;
    }

    .architecture-marquee__label {
        justify-content: flex-start;
        padding: 15px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 35, 111, 0.12);
        text-align: left;
    }

    .architecture-marquee__group {
        gap: 10px;
        padding-block: 13px;
    }

    .architecture-marquee__item {
        flex-basis: 142px;
        min-height: 116px;
        padding: 14px 10px;
    }

    .architecture-marquee__track {
        animation-duration: 24s;
    }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {

    .architecture-marquee__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .architecture-marquee__track {
        animation: none;
    }

    .architecture-marquee__group[aria-hidden="true"] {
        display: none;
    }

    .architecture-node,
    .feature-strip article,
    .capability-card,
    .pipeline-grid article,
    .use-case-panel,
    .use-case-panel li,
    .incident-card,
    .architecture-marquee__item {
        transition: none;
    }
}

/* ---------- Explore the architecture button ---------- */

#platform-overview .btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 28px rgba(16, 167, 196, 0.20), 0 3px 8px rgba(7, 26, 46, 0.10);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease;
}

    #platform-overview .btn-primary::before {
        content: "";
        position: absolute;
        top: -25%;
        bottom: -25%;
        left: -55%;
        width: 34%;
        transform: skewX(-20deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.34), transparent );
        pointer-events: none;
        transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    #platform-overview .btn-primary span {
        display: inline-block;
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    #platform-overview .btn-primary:hover {
        transform: translateY(-4px);
        filter: brightness(1.05) saturate(1.08);
        box-shadow: 0 18px 34px rgba(16, 167, 196, 0.28), 0 6px 14px rgba(7, 26, 46, 0.12);
    }

        #platform-overview .btn-primary:hover::before {
            left: 125%;
        }

        #platform-overview .btn-primary:hover span {
            transform: translateX(7px);
        }

    #platform-overview .btn-primary:active {
        transform: translateY(-1px) scale(0.985);
    }

    #platform-overview .btn-primary:focus-visible {
        outline: 3px solid rgba(16, 167, 196, 0.32);
        outline-offset: 4px;
    }


/* ---------- Processing pipeline hover ---------- */
@media (hover: hover) and (pointer: fine) {
    .pipeline-grid article:hover {
        z-index: 2;
        transform: none;
        background: transparent;
        border-color: transparent;
        border-radius: 0;
        box-shadow: none;
        outline: none;
    }
}

.pipeline-grid article .step-number,
.pipeline-grid article .step-icon,
.pipeline-grid article h3,
.pipeline-grid article p {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.pipeline-grid article:hover .step-number {
    transform: translateY(-7px) scale(1.08);
    box-shadow: 0 10px 22px rgba(16, 167, 196, 0.20), 0 0 0 6px rgba(16, 167, 196, 0.08);
}

.pipeline-grid article:hover .step-icon {
    transform: translateY(-10px) scale(1.06);
    background: #ffffff;
    border-color: rgba(16, 167, 196, 0.70);
    box-shadow: 0 16px 30px rgba(7, 26, 46, 0.12), 0 0 0 6px rgba(16, 167, 196, 0.07);
}

    .pipeline-grid article:hover .step-icon img {
        transform: scale(1.04);
    }

.pipeline-grid article:hover h3 {
    transform: translateY(-6px);
    color: #10a7c4;
}

.pipeline-grid article:hover p {
    transform: translateY(-4px);
    color: #455d73;
}

@media (prefers-reduced-motion: reduce) {
    #platform-overview .btn-primary,
    #platform-overview .btn-primary::before,
    #platform-overview .btn-primary span,
    .pipeline-grid article .step-number,
    .pipeline-grid article .step-icon,
    .pipeline-grid article h3,
    .pipeline-grid article p {
        transition: none;
    }

        #platform-overview .btn-primary::before {
            display: none;
        }
}


.architecture {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 100px;
    background: radial-gradient( circle at 12% 22%, rgba(16, 167, 196, 0.10), transparent 29% ), radial-gradient( circle at 88% 76%, rgba(35, 201, 128, 0.08), transparent 28% ), linear-gradient( 180deg, #fbfdfc 0%, #f2f8fa 100% );
}

    .architecture::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background-image: linear-gradient( rgba(23, 35, 111, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(23, 35, 111, 0.035) 1px, transparent 1px );
        background-size: 42px 42px;
        -webkit-mask-image: linear-gradient( to bottom, transparent, #000 20%, #000 85%, transparent );
        mask-image: linear-gradient( to bottom, transparent, #000 20%, #000 85%, transparent );
    }

    .architecture::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 460px;
        height: 460px;
        right: -210px;
        top: 140px;
        border-radius: 50%;
        background: rgba(16, 167, 196, 0.06);
        filter: blur(10px);
        pointer-events: none;
    }

    .architecture .section-heading {
        display: block;
        max-width: 1180px;
        margin: 0 auto 54px;
        text-align: center;
    }

        .architecture .section-heading > div {
            margin-inline: auto;
        }

        .architecture .section-heading .eyebrow {
            color: var(--eyebrow);
            letter-spacing: 0.13em;
        }

        .architecture .section-heading h2 {
            max-width: 1160px;
            margin: 24px auto 0;
            color: #17236f;
            text-wrap: balance;
        }

        .architecture .section-heading p {
            max-width: 760px;
            margin: 28px auto 0;
            color: #64748b;
            font-size: clamp(17px, 1.4vw, 21px);
            line-height: 1.7;
        }

.connected-system {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
    min-height: 420px;
    padding: 54px;
    border: 1px solid rgba(117, 139, 157, 0.42);
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(15, 36, 72, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}


    .connected-system::after {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, transparent, #10a7c4, #23c980, transparent );
    }

    .connected-system article:first-of-type {
        --node-accent: #10a7c4;
        --node-border: #a8deea;
        --node-soft: rgba(16, 167, 196, 0.09);
    }

    .connected-system article.cloud-node {
        --node-accent: #168bff;
        --node-border: #92caff;
        --node-soft: rgba(22, 139, 255, 0.09);
    }

    .connected-system article:nth-of-type(3) {
        --node-accent: #0aa271;
        --node-border: #91d9c2;
        --node-soft: rgba(10, 162, 113, 0.09);
    }

    /* การ์ดแต่ละขั้น */
    .connected-system article {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 310px;
        padding: 40px 30px;
        border: 1px solid var(--node-border, #d3e2e9);
        border-radius: 22px;
        background: linear-gradient( 180deg, var(--node-soft, rgba(16, 167, 196, 0.06)), rgba(255, 255, 255, 0.96) 48% );
        text-align: center;
        box-shadow: 0 14px 32px rgba(15, 36, 72, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
    }

        /* เส้นสีด้านบนของแต่ละการ์ด */
        .connected-system article::before {
            content: "";
            position: absolute;
            top: 0;
            left: 22%;
            right: 22%;
            height: 4px;
            border-radius: 0 0 999px 999px;
            background: var(--node-accent, #10a7c4);
            opacity: 0.85;
        }

        /* แสงด้านหลัง icon */
        .connected-system article::after {
            content: "";
            position: absolute;
            top: 42px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            z-index: -1;
            background: var(--node-soft, rgba(16, 167, 196, 0.08));
            filter: blur(14px);
            transition: transform 260ms ease, opacity 260ms ease;
        }

    .connected-system .system-icon {
        width: 86px;
        height: 86px;
        margin-bottom: 23px;
        border: 1px solid var(--node-border, #a3e1f0);
        border-radius: 22px;
        background: linear-gradient( 145deg, #ffffff, #eefafd );
        box-shadow: 0 12px 25px rgba(15, 36, 72, 0.11);
        transition: transform 260ms ease, box-shadow 260ms ease;
    }

        .connected-system .system-icon img {
            width: 58px;
            height: 58px;
            object-fit: contain;
        }

    .connected-system article > small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 14px;
        padding: 7px 11px;
        border-radius: 999px;
        background: var(--node-soft, rgba(16, 167, 196, 0.08));
        color: var(--node-accent, #10a7c4);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.13em;
    }

    .connected-system h3 {
        margin: 0 0 14px;
        color: #17236f;
        font-size: clamp(21px, 1.6vw, 26px);
        line-height: 1.25;
    }

    .connected-system p {
        max-width: 280px;
        margin: 0 auto;
        color: #64748b;
        font-size: 16px;
        line-height: 1.7;
    }

/* จุดเชื่อมระหว่างการ์ด */
.system-arrow {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

    .system-arrow::before {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        top: 55%;
        height: 2px;
        background: linear-gradient( 90deg, rgba(16, 167, 196, 0.15), rgba(16, 167, 196, 0.80), rgba(35, 201, 128, 0.35) );
    }

    .system-arrow small {
        position: relative;
        z-index: 2;
        display: block;
        margin: 0 0 18px;
        padding: 6px 10px;
        border: 1px solid rgba(16, 167, 196, 0.15);
        border-radius: 999px;
        background: rgba(248, 252, 253, 0.95);
        color: #64748b;
        font-size: 11px;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* The arrow used to be a "→" character. Manrope is never loaded on this
       page, and the fallback font put the glyph's ink 15.7px below the centre
       of the 46px circle — it read as sitting on the bottom edge. An inline SVG
       centres on geometry instead of font metrics. */
    .system-arrow strong {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(16, 167, 196, 0.35);
        border-radius: 50%;
        background: #ffffff;
        color: #10a7c4;
        box-shadow: 0 8px 20px rgba(16, 167, 196, 0.13);
        animation: architecture-flow 1.9s ease-in-out infinite;
    }

        .system-arrow strong svg {
            display: block;
            width: 23px;
            height: 23px;
        }

/* Hover เฉพาะการ์ด ไม่เป็นสี่เหลี่ยมใหญ่ */
@media (hover: hover) {
    .connected-system article:hover {
        transform: translateY(-9px);
        border-color: var(--node-accent, #10a7c4);
        box-shadow: 0 24px 44px rgba(15, 36, 72, 0.14), 0 0 0 4px var(--node-soft, rgba(16, 167, 196, 0.07));
    }

        .connected-system article:hover .system-icon {
            transform: translateY(-4px) scale(1.07);
            box-shadow: 0 17px 32px rgba(15, 36, 72, 0.16);
        }

        .connected-system article:hover::after {
            transform: scale(1.18);
            opacity: 0.95;
        }
}

@keyframes architecture-flow {
    0%, 100% {
        transform: translateX(-3px);
        box-shadow: 0 8px 20px rgba(16, 167, 196, 0.13);
    }

    50% {
        transform: translateX(5px);
        box-shadow: 0 8px 24px rgba(16, 167, 196, 0.25), 0 0 0 7px rgba(16, 167, 196, 0.07);
    }
}

@keyframes architecture-flow-down {
    0%, 100% {
        transform: rotate(90deg) translateX(-3px);
        box-shadow: 0 8px 20px rgba(16, 167, 196, 0.13);
    }

    50% {
        transform: rotate(90deg) translateX(5px);
        box-shadow: 0 8px 24px rgba(16, 167, 196, 0.25), 0 0 0 7px rgba(16, 167, 196, 0.07);
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .connected-system {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 34px;
    }

        .connected-system article {
            min-height: 270px;
        }

    .system-arrow {
        min-height: 82px;
    }

        .system-arrow::before {
            top: 8px;
            bottom: 8px;
            left: 50%;
            right: auto;
            width: 2px;
            height: auto;
        }

        .system-arrow small {
            margin-bottom: 9px;
        }

        /* rotate(90deg) turns the arrow downward, and translateX then runs
           along that rotated axis — so the same travel reads as flowing down
           the column. The keyframes have to carry the rotation, because they
           animate transform and would otherwise wipe it out. */
        .system-arrow strong {
            transform: rotate(90deg);
            animation: architecture-flow-down 1.9s ease-in-out infinite;
        }
}

/* Mobile */
@media (max-width: 640px) {
    .architecture {
        padding-block: 72px;
    }

        .architecture .section-heading {
            margin-bottom: 36px;
        }

    .connected-system {
        padding: 22px;
        border-radius: 22px;
    }

        .connected-system article {
            min-height: 245px;
            padding: 32px 22px;
        }

        .connected-system .system-icon {
            width: 76px;
            height: 76px;
        }

            .connected-system .system-icon img {
                width: 50px;
                height: 50px;
            }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .connected-system *,
    .connected-system *::before,
    .connected-system *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Keep colour and grid inside the connected-system frame only */
.pim-page .architecture {
    background: var(--background, #f7f8f5) !important;
}

    /* Remove grid and decorative glow from outside the frame */
    .pim-page .architecture::before,
    .pim-page .architecture::after {
        content: none !important;
        display: none !important;
    }


#workflow.pipeline {
    padding: clamp(52px, 6vw, 88px) 0;
    background: transparent;
}

    #workflow.pipeline > .container {
        position: relative;
        isolation: isolate;
        box-sizing: border-box;
        width: min(1320px, calc(100% - 48px));
        max-width: none;
        margin-inline: auto;
        padding: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 60px);
        overflow: hidden;
        border: 1px solid rgba(95, 202, 230, 0.28);
        border-radius: 34px;
        background: linear-gradient( rgba(255, 255, 255, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px ), linear-gradient( 135deg, #071d33 0%, #0a2f50 60%, #0b3b61 100% );
        background-size: 42px 42px, 42px 42px, auto;
        box-shadow: 0 24px 60px rgba(7, 29, 51, 0.2);
        text-align: center;
    }

        #workflow.pipeline > .container::after {
            content: "";
            position: absolute;
            z-index: -1;
            top: -180px;
            right: -140px;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            background: rgba(16, 167, 196, 0.11);
            filter: blur(10px);
            pointer-events: none;
        }

    #workflow.pipeline .eyebrow {
        display: inline-block;
        margin: 0 auto;
        padding-bottom: 10px;
        color: var(--eyebrow);
        border-bottom: 3px solid #16b9d7;
        text-align: center;
    }


    #workflow.pipeline h2 {
        max-width: 900px;
        margin: 24px auto clamp(48px, 5vw, 68px);
        color: #ffffff;
        text-align: center;
        text-wrap: balance;
    }


    #workflow.pipeline .pipeline-grid {
        width: 100%;
        align-items: start;
    }

        #workflow.pipeline .pipeline-grid::before {
            border-top-color: rgba(48, 204, 231, 0.72);
        }


        #workflow.pipeline .pipeline-grid article {
            padding-right: 0;
            padding-inline: 16px;
            text-align: center;
        }


    #workflow.pipeline .step-number {
        margin-inline: auto;
        border-color: rgba(111, 225, 244, 0.2);
        box-shadow: 0 0 0 6px rgba(16, 167, 196, 0.09);
    }
     #workflow.pipeline .step-number.green {
            border-color: rgba(35, 201, 128, 0.2);
            box-shadow: 0 0 0 6px rgba(35, 201, 128, 0.09);
        }

    #workflow.pipeline .step-icon {
        margin: 22px auto 18px;
        color: #17236f;
        background: #f4fbfe;
        border-color: rgba(112, 218, 239, 0.65);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    }


    #workflow.pipeline .pipeline-grid h3 {
        margin-bottom: 8px;
        color: #ffffff;
        font-size: 16px;
    }


    #workflow.pipeline .pipeline-grid p {
        max-width: 180px;
        margin-inline: auto;
        color: #b8cad9;
        font-size: 13px;
        line-height: 1.65;
    }

@media (hover: hover) and (pointer: fine) {
    #workflow.pipeline .pipeline-grid article:hover .step-icon {
        background: #ffffff;
        border-color: #62d8ee;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 5px rgba(16, 167, 196, 0.12);
    }

    #workflow.pipeline .pipeline-grid article:hover h3 {
        color: #72e2f4;
    }

    #workflow.pipeline .pipeline-grid article:hover p {
        color: #eef8fc;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    #workflow.pipeline > .container {
        width: min(940px, calc(100% - 36px));
        padding: 48px 32px;
        border-radius: 28px;
    }

    #workflow.pipeline .pipeline-grid {
        row-gap: 48px;
    }
}

/* Mobile */
@media (max-width: 520px) {
    #workflow.pipeline {
        padding-block: 36px;
    }

        #workflow.pipeline > .container {
            width: calc(100% - 24px);
            padding: 38px 22px;
            border-radius: 24px;
            text-align: left;
        }

        #workflow.pipeline .eyebrow,
        #workflow.pipeline h2 {
            text-align: left;
        }

        #workflow.pipeline .eyebrow {
            margin-left: 0;
        }

        #workflow.pipeline h2 {
            margin-left: 0;
            margin-bottom: 38px;
        }

        /* รักษา mobile layout เดิม */
        #workflow.pipeline .pipeline-grid article {
            padding: 0;
            text-align: left;
        }

        #workflow.pipeline .step-number,
        #workflow.pipeline .step-icon,
        #workflow.pipeline .pipeline-grid p {
            margin: 0;
        }

        #workflow.pipeline .pipeline-grid h3,
        #workflow.pipeline .pipeline-grid p {
            text-align: left;
        }

}

/*===================LIVE USE CASE — SCAN REPORT=====================*/
/* The card itself is the shared component from general.css; here it just sits
   in the panel's right-hand column at a readable size for a full-width slot. */
.use-case-report {
    align-self: center;
    padding: 20px 22px 16px;
}
.use-case-report .scan-report-head img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
.use-case-report .scan-report-head b {
    font-size: 16px;
}
.use-case-report .scan-report-head small {
    font-size: 10.5px;
}
.use-case-report .scan-report-table th {
    padding: 11px 6px 8px;
    font-size: 10px;
}
.use-case-report .scan-report-table td {
    padding: 10px 6px;
    font-size: 10.5px;
}

/* Restrained motion: platform only. Content stays visible without JavaScript. */
.reveal { opacity: 1; transform: none; transition: none; }
.icon-asset img { object-fit: contain; transition: transform 240ms cubic-bezier(.2,.65,.3,1); }
@media (hover: hover) and (pointer: fine) {
    .architecture-node:hover,
    .feature-strip article:hover,
    .capability-card:hover,
    .pipeline-grid article:hover,
    .incident-card:hover { transform: translateY(-3px); }
    .architecture-node:hover .node-icon img,
    .feature-strip article:hover .icon-asset img,
    .pipeline-grid article:hover .step-icon img { transform: translateY(-2px) scale(1.05); }
}
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--cyan); outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .architecture-node:hover, .feature-strip article:hover,
    .capability-card:hover, .pipeline-grid article:hover, .incident-card:hover,
    .architecture-marquee__item:hover, .use-case-panel li:hover,
    .architecture-node:hover img, .feature-strip article:hover img,
    .capability-card:hover img, .pipeline-grid article:hover img,
    .architecture-marquee__item:hover img { transform: none; }
}

/* A single rounded tile around a consistently inset, transparent SVG glyph. */
.icon-asset,
#workflow.pipeline .step-icon.icon-asset,
.connected-system .system-icon.icon-asset,
.architecture-marquee__icon {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #A9DFE8;
    border-radius: 22%;
    background: #F3FBFC;
    overflow: visible;
    flex-shrink: 0;
    aspect-ratio: 1;
}
.icon-asset img,
.connected-system .system-icon.icon-asset img,
.architecture-marquee__icon img {
    display: block;
    width: 76%;
    height: 76%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    transform: none;
}
/* Move the tile as a unit; do not enlarge or offset its inner drawing. */
.architecture-node:hover .node-icon img,
.feature-strip article:hover .icon-asset img,
.connected-system article:hover .system-icon img,
.pipeline-grid article:hover .step-icon img,
.architecture-marquee__item:hover .architecture-marquee__icon img {
    transform: none;
}