@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --bg: #F7F8F5;
    --bg2: #1F2A7C;
    --panel: #0c1627;
    --panel2: #111d31;
    --text1: #1F2A7C;
    --text2: #F7F8F5;
    --muted: #74768a;
    --line: rgba(161, 187, 224, 0.14);
    --cyan: #12BFEA;
    /* eyebrows, site-wide — see .eyebrow below */
    --eyebrow: #10a7c4;
    --violet: #65d39a;
    --green: #22c55e;
    --danger: #ff647b;
    --radius: 22px;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background-color: var(--bg);
    /*background:
        radial-gradient(
        circle at 65% 5%,
        rgba(46, 212, 122, 0.16),
        transparent 28%
        ),
        radial-gradient(circle at 10% 35%, rgba(76, 175, 80, 0.1), transparent 24%),
        var(--bg);*/
    color: var(--text);
    font-family: "Manrope";
    line-height: 1.65;
}
body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
a {
    color: inherit;
    text-decoration: none;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    display: block;
}
.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition: 0.25s;
}
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.544);
    backdrop-filter: blur(18px);
    border-color: var(--line);
}
.nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    width: 198px;
}
.navlinks {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    color: var(--text1);
    font-weight: bold;
}
.navlinks a:hover,
.navlinks a.active {
    /* same cyan the dropdown items use */
    color: #10a7c4;
}
.nav-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    font-weight: 700;
    transition: 0.25s;
}
.nav-cta {
    font-weight: bold;
    padding: 5px 20px 5px 20px;
    color: var(--text1);
    align-items: center;
    border-radius: 8px;
    border: 2px solid var(--bg2);
}
.nav-cta:hover{
    color: #F7F8F5 !important;
    background-color: var(--bg2);
}
.btn {
    padding: 14px 20px;
    border: 1px solid var(--line);
}
.btn-primary {
    /* literal brand cyan, not var(--cyan): .pim-page rebinds that token to a
       darker value, which made this button differ from the Home one */
    background: linear-gradient(135deg, #12bfea, #1097b9);
    color: var(--text2);
    border: 0;
    box-shadow: 0 12px 35px rgba(85, 233, 255, 0.18);
}
.btn-primary::after{
    content: "→";
    transition: transform 0.15s ease;
}
.btn-primary:hover::after{
    transform: translateX(3px);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
}
.btn:hover {
    transform: translateY(-2px);
}
.menu {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 26px;
}
.eyebrow {
    font-weight: bold;
    font-size: 20px;
    width: fit-content;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, #1097b9, #12BFEA, #1097b9);
    border-image-slice: 1;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 2rem !important;
}
/*.eyebrow:before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}*/
h1,
h2,
h3 {
    line-height: 1.08;
    margin: 0;
}
h1 {
    color: var(--text1);    
    font-size: clamp(48px, 5vw, 68px);
    /*font-size: clamp(3.2rem, 6vw, 6.5rem);*/
    letter-spacing: -0.055em;
    margin-top: 1rem;
}
h2 {
    color: var(--text1);
    /*font-size: clamp(2.2rem, 4vw, 4rem);*/
    font-size: 30px;
    letter-spacing: -0.04em;
    margin-top: 2rem;
}
h3 {
    color: var(--text1);
    font-size: 1.25rem;
}
b{
    color: var(--bg2);
    font-size: 20px;
}
p{
    color: var(--muted);
    font-size: 15px
}
.gradient {
    background: linear-gradient(to right, #1097b9, #12BFEA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lead {
    font-size: 18px;
    color: var(--muted);
    max-width: 690px;
}
.hero {
    padding: 3rem 0 5rem;
}
#iconImg{
    width: 2.5rem; 
    height: 2.5rem; 
    display: block; 
    margin-bottom: 8px; 
}

/*===================CONTACT LINK=====================*/
.contact-inner-band{
    margin: 8rem 0 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* the column centres each box, but a heading that wraps still needs its
       own lines centred */
    text-align: center;
    /*border: 2px solid #e6e5df;*/
    background: linear-gradient(to right, #1F2A7C, #3848c5, #2836aa);
    padding-top: 20px;
}
.contact-inner-band h2, 
.contact-inner-band b{
    color: var(--text2);
}

.contact-inner-band p{
    text-align: center;
    padding: 10px 0 30px 0;
    color: var(--text2);
}
.contact-inner-band #schedBtn{
    font-weight: bold;
    padding: 10px 30px 10px 30px;
    align-items: center;
    color: #2836aa;
    background-color: #F7F8F5;
    border-radius: 50px;  
    margin-bottom: 40px; 
}
.contact-inner-band #schedBtn:hover{
    color: #F7F8F5;
    background-color: #5c6df0;
}


/*===================FOOTER=====================*/
footer {
    padding: 55px 0 25px;
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    /* brand block, then the four nav columns held close together */
    grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.footer-brand {
    padding-right: 30px;
}
.footer-grid img {
    width: 190px;
}
.footer-grid p,
.footer-grid a {
    color: var(--muted);
    font-size: 13px;
}
.footer-grid h4 {
    color: var(--text1);
    margin: 0 0 14px;
}
.footer-links {
    display: grid;
    gap: 8px;
}
.copyright {
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    color: #65758d;
    font-size: 12px;
}

/*===================PHONE MOCKUP — SHARED COMPONENT=====================*/
/* Used by the "Explainable by design" block on Home and the demo block on the
   Windows page. Lives here rather than in home.css so the second page does not
   have to repeat 200 lines of screen chrome. Add .is-flat to kill the 3D slant
   and show the handset face on. */
.phoneStage {
    perspective: 1400px;
    display: flex;
    justify-content: center;
    padding: 60px;
    background: radial-gradient(circle at 75% 30%, #16215c 0%, #05060f 65%);
}

/* ---- Outer phone frame ---- */
.phoneShell {
    position: relative;
    width: 348px;
    padding: 10px;
    border-radius: 34px;
    background: linear-gradient(251deg, #000000 0%, #090f3a 40%, #000000 100%);
    box-shadow:
        30px 50px 60px rgb(0 0 0 / 66%),
        inset 0 0 0 1px rgb(255 255 255 / 6%),
        inset -6px 0 12px rgba(0, 0, 0, 0.6);
    transform: rotateY(-14deg) rotateX(23deg) rotate(-1deg);
    transform-style: preserve-3d;
}

/* front-facing variant: no slant, so the shadow has to fall straight down */
.phoneShell.is-flat {
    transform: none;
    box-shadow:
        0 34px 70px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgb(255 255 255 / 7%);
}

/* Glass glare across the screen */
.phoneShell::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 34px;
    background: linear-gradient(115deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0) 75%,
        rgba(255,255,255,0.04) 100%);
    pointer-events: none;
}

/* --- Screen content ---- */
.threatPanel {
    display: flex;
    flex-direction: column;
    /* fixed screen height — the cards scroll inside it rather than
       stretching the phone to fit their content. Tune this one number. */
    height: 620px;
    overflow: hidden;
    background: #f6f7f9;
    border-radius: 24px;
    padding: 12px 11px 11px;
    font-size: 12px;
    color: #14162a;
    /* the surrounding block centres its text on phones — the screen must not
       inherit that, or every line inside the phone shifts off the left edge */
    text-align: left;
}

/* pinned top, pinned bottom, scrolling middle */
.tp-status,
.tp-header,
.tp-quarantine,
.tp-actions {
    flex: 0 0 auto;
}
.tp-scroll {
    flex: 1 1 auto;
    min-height: 0;              /* without this a flex item refuses to shrink */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c9cbd6 transparent;
}
.tp-scroll::-webkit-scrollbar {
    width: 4px;
}
.tp-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #c9cbd6;
}
.tp-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.tp-scroll > .tp-card:last-child {
    margin-bottom: 0;
}

/* status bar */
.tp-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px 11px;
    color: #14162a;
    font-size: 10.5px;
    font-weight: 700;
}
.tp-time {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #14162a;
}
.tp-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-status-icons svg {
    display: block;
}

/* title row */
.tp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 11px;
}
.threatPanel .tp-header b {
    color: #14162a;
    font-size: 14px;
    font-weight: 800;
}
.tp-back {
    color: #14162a;
    font-size: 15px;
    line-height: 1;
}

/* cards */
.tp-card {
    margin-bottom: 9px;
    padding: 12px 11px;
    border: 1px solid #e8e9ee;
    border-radius: 12px;
    background: #fff;
}
.tp-card h4 {
    margin: 0 0 9px;
    color: #14162a;
    font-size: 12px;
    font-weight: 800;
}

/* app summary */
.tp-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.threatPanel .tp-app b {
    display: block;
    color: #14162a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}
.threatPanel .tp-app span {
    color: #ffffff;
    font-size: 9.5px;
}
.tp-pill {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 8px;
    background: #ef3b3b;
    color: #b3283a;
    font-size: 10px;
    font-weight: 700;
}

/* AI analysis reasons */
.threatPanel .tp-reasons li {
    display: block;
    width: 100%;
    margin: 0;
    line-height: 1.45;
    text-align: left;
}
.threatPanel .tp-reasons li + li {
    margin-top: 11px;
}
.threatPanel .tp-reasons b {
    display: block;
    margin-bottom: 3px;
    color: #e08a1e;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
.threatPanel .tp-reasons p {
    margin: 0;
    color: #55576a;
    font-size: 9.5px;
    line-height: 1.45;
}

/* detection details */
.tp-detail + .tp-detail {
    margin-top: 10px;
}
.threatPanel .tp-detail span {
    display: block;
    color: #8b8d9c;
    font-size: 9px;
}
.threatPanel .tp-detail b {
    display: block;
    margin-top: 1px;
    color: #14162a;
    font-size: 12px;
    font-weight: 600;
}

/* quarantine notice + actions */
.threatPanel .tp-quarantine {
    margin: 11px 0 9px;
    color: #e0333f;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}
.tp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.tp-actions button {
    padding: 11px 6px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.tp-release {
    background: #7b7f8c;
}
.tp-uninstall {
    background: #ef3b3b;
}

@media (max-width: 620px) {
    .phoneShell,
    .phoneShell.is-flat {
        width: min(251px, 100%);
        margin: 12px auto 0;
        transform: none;                     /* kills the 3D slant */
        box-shadow:
            0 24px 50px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    .threatPanel {
        height: 513px;
    }
}

/*===================SCAN-LOG CARD — SHARED COMPONENT=====================*/
/* A miniature model-scan report. Used inside the Company black-box diagram and
   the Platform live-use-case panel, so it lives here rather than in either. */
.scan-report {
    padding: 14px 15px 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(20, 35, 90, 0.06);
}
.scan-report-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    border-bottom: 1px solid #f1f1f4;
}
.scan-report-head img {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}
.scan-report-head b {
    display: block;
    color: #1F2A7C;
    font-size: 13px;
    line-height: 1.2;
}
.scan-report-head small {
    display: block;
    margin-top: 2px;
    color: #8d90a2;
    font-size: 8px;
}
.scan-report-table {
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
}
.scan-report-table th {
    padding: 7px 4px 5px;
    color: #1F2A7C;
    font-size: 7.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}
.scan-report-table td {
    padding: 6px 4px;
    border-top: 1px solid #f1f1f4;
    color: #5c5f70;
    font-size: 7.5px;
    line-height: 1.3;
}
.scan-report-table .is-bad {
    color: #d13b45;
    font-weight: 700;
}
.scan-report-table .is-ok {
    color: #1fae6e;
    font-weight: 700;
}

/*===================SHARED SECTION RULES=====================*/
.section-head {
    max-width: 760px;
    margin-bottom: 52px;
}
.section-head h2 {
    margin: 15px 0 18px;
}
.dark-block {
    background: transparent;
}
.band {
    width: 100%;
}
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: 0.7s;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/*===================SHARED PALETTE=====================*/
/* Platform, Solutions and Technology share one palette. It is applied via
   <main class="pim-page"> rather than a bare `main`, because six of these
   token names (--cyan --green --line --muted --shadow --text) also exist in
   :root above with different values — an unscoped `main` rule would leak
   these into the Home and Company pages. */
.pim-page {
    --navy: #17236f;
    --navy-light: #26368e;
    --blue: #1689c7;
    --cyan: #10a7c4;
    --green: #0aa271;
    --red: #ff5b61;
    --orange: #eba928;
    --white: #ffffff;
    --background: #f7f8f4;
    --text: #17236f;
    --muted: #667085;
    --border: #828793;
}
.pim-page button {
    font: inherit;
}

/*===================COLLAPSIBLE HAMBURGER MENU=====================*/
.menu {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 26px;
}

/*===================DYNAMIC LAYOUT=====================*/
/*===================HAMBURGER NAV=====================*/
@media (max-width: 950px) {
    .menu {
        display: block;
        color: var(--text1);
        line-height: 1;
        cursor: pointer;
    }
    .navlinks {
        display: none;
        position: absolute;
        top: 78px;
        left: 20px;
        right: 20px;
        padding: 18px;
        background: #ffffff;
        border: 1px solid rgba(31, 42, 124, 0.14);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(31, 42, 124, 0.12);
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .navlinks.open {
        display: flex;
    }
    .nav-cta {
        justify-content: center;
    }
}
/*===================PHONE — GLOBAL=====================*/
@media (max-width: 620px) {
    .container {
        margin-top: 1rem;
        width: min(100% - 26px, 1180px);
    }
    .section {
        padding: 10px;
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 30px;
    }
    p {
        font-size: 14px;
    }
    .eyebrow {
        font-size: 13px;
    }
    .logo img {
        width: 150px;
    }
    #iconImg{
        padding: 0;
        margin: 0 !important; 
    }
    .lead {
        font-size: 16px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
    }
    .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
    .copyright {
        flex-direction: column;
        gap: 8px;
    }
}

/* =====================================================
   COMPACT NAVIGATION DROPDOWNS
===================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

.site-header,
.site-header .nav,
.navlinks {
    overflow: visible;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Dropdown parent */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

    /* Platform / Solutions / Technology button */
    .nav-item summary {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        color: inherit;
        font: inherit;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        list-style: none;
        transition: color 160ms ease;
    }

        .nav-item summary::-webkit-details-marker {
            display: none;
        }

        .nav-item summary::after {
            content: "";
            width: 6px;
            height: 6px;
            margin-top: -3px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg);
            transition: transform 180ms ease;
        }

    .nav-item:hover summary,
    .nav-item:focus-within summary,
    .nav-item[open] summary {
        color: #10a7c4;
    }

        .nav-item:hover summary::after,
        .nav-item:focus-within summary::after,
        .nav-item[open] summary::after {
            margin-top: 3px;
            transform: rotate(225deg);
        }

/* Compact dropdown block */
.section-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1100;
    width: 280px;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(99, 199, 226, 0.28);
    border-radius: 13px;
    background: rgba(7, 27, 51, 0.98);
    box-shadow: 0 20px 45px rgba(7, 27, 51, 0.22), 0 4px 12px rgba(7, 27, 51, 0.12);
    /* it opens by easing down and up into place, so the scale has to start
       from the top edge rather than the middle */
    transform-origin: 50% 0;
    transform: translate(-50%, -6px) scaleY(0.94);
    transition:
        opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 260ms;
}

/* the Solutions menu carries a second level, so it needs the extra room */
.section-menu.is-wide {
    width: 320px;
    /* two levels make this the tallest menu — cap it against short viewports */
    max-height: min(72vh, 580px);
    overflow-y: auto;
}

.menu-group + .menu-group {
    margin-top: 2px;
}

.menu-sub {
    display: grid;
    gap: 1px;
    padding: 2px 0 7px 39px;
}

.section-menu .menu-sub a {
    display: block;
    min-height: 0;
    /* the 1px transparent border is what the current-section highlight paints,
       so it must be here too or the row would jump by 2px */
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #9fb2c8;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.section-menu .menu-sub a:hover,
.section-menu .menu-sub a:focus-visible {
    color: #ffffff;
    background: rgba(16, 167, 196, 0.13);
    outline: none;
    transform: none;
}

    /* Invisible bridge prevents dropdown disappearing */
    .section-menu::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 10px;
    }

/* Keep the last dropdown (Company) inside the screen */
.nav-item:last-of-type .section-menu {
    right: 0;
    left: auto;
    transform: translateY(-6px) scaleY(0.94);
}

/* Show dropdown */
.nav-item:hover .section-menu,
.nav-item:focus-within .section-menu,
.nav-item[open] .section-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scaleY(1);
}

.nav-item:last-of-type:hover .section-menu,
.nav-item:last-of-type:focus-within .section-menu,
.nav-item:last-of-type[open] .section-menu {
    transform: translateY(0) scaleY(1);
}

/* Hide immediately after selecting a section */
.nav-item.nav-dismissed .section-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -6px) scaleY(0.94) !important;
}

.nav-item:last-of-type.nav-dismissed .section-menu {
    transform: translateY(-6px) scaleY(0.94) !important;
}

/* Individual section option — also the header of a two-level group */
.section-menu > a,
.section-menu .menu-group > a {
    min-height: 49px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

    /* Number block: 01, 02, 03 */
    .section-menu > a > span,
    .section-menu .menu-group > a > span {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        color: #72d9ee;
        background: rgba(16, 167, 196, 0.14);
        border: 1px solid rgba(114, 217, 238, 0.24);
        border-radius: 7px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.05em;
    }

/* Title */
.section-menu b,
.section-menu strong {
    display: block;
    margin: 0 0 2px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

/* Description */
.section-menu small {
    display: block;
    color: #9fb2c8;
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1.3;
}

/* Hover selected section */
.section-menu > a:hover,
.section-menu > a:focus-visible,
.section-menu .menu-group > a:hover,
.section-menu .menu-group > a:focus-visible {
    color: #ffffff;
    border-color: rgba(114, 217, 238, 0.24);
    background: rgba(16, 167, 196, 0.13);
    transform: translateX(2px);
    outline: none;
}

    .section-menu > a:hover > span,
    .section-menu > a:focus-visible > span,
    .section-menu .menu-group > a:hover > span,
    .section-menu .menu-group > a:focus-visible > span {
        color: #071b33;
        background: #72d9ee;
    }

/* Current section — js/navigation.js sets this from the scroll position, so the box
   shows whichever section is on screen, however the visitor got there */
.section-menu > a.is-current,
.section-menu .menu-group > a.is-current {
    color: #ffffff;
    border-color: #72d9ee;
    background: rgba(16, 167, 196, 0.16);
}

    .section-menu > a.is-current > span,
    .section-menu .menu-group > a.is-current > span {
        color: #071b33;
        background: #72d9ee;
    }

.section-menu .menu-sub a.is-current {
    color: #ffffff;
    border-color: #72d9ee;
    background: rgba(16, 167, 196, 0.13);
}

/* Active page title */
.nav-item.active > summary {
    color: #10a7c4;
}

/* =====================================================
   NAVBAR TONE
   The links keep one tone the whole way down the page. The
   single exception is the active page's own link: its cyan
   has almost no contrast over a dark band, so that one
   turns white while such a band is under the header.
===================================================== */
@media (min-width: 951px) {
    .site-header .navlinks a,
    .site-header .nav-item summary {
        transition: color 240ms ease, border-color 240ms ease,
            background-color 240ms ease;
    }

    /* the current page keeps its highlight */
    .nav-item.active > summary {
        color: #10a7c4;
    }

    /* over a dark band that cyan has almost no contrast against its own
       backdrop, so the active link — and only that link — turns white.
       js/navigation.js samples what is actually behind it. */
    .nav-item.active.on-dark > summary,
    .navlinks > a.active.on-dark {
        color: #ffffff;
    }
}

/* =====================================================
   MOBILE DROPDOWN
===================================================== */

@media (max-width: 950px) {
    .nav-item {
        width: 100%;
        display: block;
        align-self: auto;
    }

        .nav-item summary {
            width: 100%;
            height: auto;
            padding: 11px 2px;
            justify-content: space-between;
        }

        /* .is-wide carries a desktop width and its own scroller — both have to
           be undone here or the Solutions menu breaks out of the panel */
        .section-menu,
        .section-menu.is-wide,
        .nav-item:last-of-type .section-menu {
            position: static;
            width: 100%;
            max-height: 0;
            padding: 0;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            border: 0;
            border-radius: 10px;
            box-shadow: none;
            background: #071b33;
            transform: none;
            transition: max-height 220ms ease, padding 220ms ease, opacity 180ms ease;
        }

            .section-menu::before {
                display: none;
            }

        .nav-item:hover .section-menu,
        .nav-item:focus-within .section-menu {
            max-height: 0;
            padding: 0;
            visibility: hidden;
            opacity: 0;
            transform: none;
        }

        .nav-item[open] .section-menu,
        .nav-item:last-of-type[open] .section-menu {
            max-height: 430px;
            padding: 7px;
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: none;
        }

        /* the two-level Solutions menu is far taller than the flat ones */
        .nav-item[open] .section-menu.is-wide {
            max-height: 1000px;
        }

    .section-menu > a {
        min-height: 47px;
        padding: 7px 9px;
    }

    /* the open panel can outgrow the screen once a dropdown expands, so it
       scrolls itself rather than running off the bottom */
    .navlinks.open {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/*===================SCAN-LOG CARD — SCALES UP AS SPACE ALLOWS=====================*/
/* Sized down hard so it fits a narrow slot inside the Company diagram. Once the
   diagram stacks and the card gets the full width, that type is needlessly
   small — so it steps back up as the viewport shrinks. */
@media (max-width: 1250px) {
    .scan-report-head img {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }
    .scan-report-head b {
        font-size: 15px;
    }
    .scan-report-head small {
        font-size: 10px;
    }
    .scan-report-table th {
        padding: 9px 6px 6px;
        font-size: 9.5px;
    }
    .scan-report-table td {
        padding: 8px 6px;
        font-size: 10px;
    }
}

@media (max-width: 720px) {
    .scan-report-head b {
        font-size: 16px;
    }
    .scan-report-head small {
        font-size: 11px;
    }
    .scan-report-table th {
        font-size: 10.5px;
    }
    .scan-report-table td {
        font-size: 11.5px;
    }
}


/*===================SUB-HERO BAND (shared)=====================*/
/* The band under the header on the Solutions and Technology pages. Both sheets
   carried an identical copy; it lives here now. The button pair and the
   .eyebrow + heading gap stay in those sheets on purpose — other pages style
   .btn and .actions too, so a copy up here would win fights it should lose. */
.eyebrow.light {
    color: var(--eyebrow);
}
.sub-hero {
    padding: 55px 0 48px;
    overflow: hidden;
}
.sub-hero-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.38fr;
    align-items: center;
    gap: 64px;
}
.sub-hero h1 {
    margin: 0;
    font-family: "Manrope", sans-serif;
}
.sub-hero h1 em {
    font-style: normal;
    background: linear-gradient(to right, #1097b9, #12BFEA);
    background-clip: text;
    color: transparent;
}
.sub-hero h1 span {
    background: linear-gradient(100deg, #158cad, #10b6d0);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.hero-lead {
    color: #5e7084;
    font-size: 16px;
    line-height: 1.7;
}
@media (max-width: 780px) {
    .sub-hero h1 {
        font-size: 44px;
    }
}
@media (max-width: 520px) {
    .sub-hero h1 {
        font-size: 39px;
    }
}
@media(max-width:780px) {
    .sub-hero h1 {
        font-size: 44px;
    }
}
@media(max-width:520px) {
    .sub-hero h1 {
        font-size: 39px;
    }
}

/* =====================================================
   EXPLORE BUTTON — shared hero CTA
   Mirrors the "Explore the architecture" button on the
   platform page (#platform-overview .btn-primary) so the
   Home and Technology hero CTAs look and behave the same.
   The element selector keeps it ahead of the page-level
   .btn / .pim-page .btn overrides in technology.css.
   ===================================================== */

a.btn.btn-explore {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text2);
    background: linear-gradient(135deg, #12bfea, #1097b9);
    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;
}

    a.btn.btn-explore::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);
    }

    a.btn.btn-explore::after {
        content: "→";
        transition: transform 0.15s ease;
    }

    a.btn.btn-explore: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);
    }

        a.btn.btn-explore:hover::before {
            left: 125%;
        }

        a.btn.btn-explore:hover::after {
            transform: translateX(3px);
        }

    a.btn.btn-explore:active {
        transform: translateY(-1px) scale(0.985);
    }

    a.btn.btn-explore:focus-visible {
        outline: 3px solid rgba(16, 167, 196, 0.32);
        outline-offset: 4px;
    }

@media (prefers-reduced-motion: reduce) {
    a.btn.btn-explore,
    a.btn.btn-explore::before,
    a.btn.btn-explore::after {
        transition: none;
    }

        a.btn.btn-explore::before {
            display: none;
        }
}