.platform-page,
.platform-page *{
    box-sizing:border-box;
}

:root{
    
	--architecture-heading-gap:28px;

}

.platform-page{
    position:relative;
    width:100%;


    color:#fff;
    font-family:"Segoe UI", Tahoma, Verdana, sans-serif;
}
.platform-page{
    height:auto;
    min-height:0;
    overflow:visible;
}


.platform-security-image-slide{
    
    
    overflow:visible;
}


/* Slider */


.platform-track{


    transition:transform .75s cubic-bezier(.22,.8,.24,1);
}

.platform-slide{
    
    
    flex:0 0 100vw;
    
    
}

/* Hero */


.platform-hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
    margin:0;
    background:none;
    border:none;
    box-shadow:none;
    overflow:visible;
}
.platform-hero-image img{
    display:block;
    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;
    object-position:center;

    border-radius:18px;
    /* border:1px solid rgba(95,170,255,.25); */

    box-shadow:0 20px 50px rgba(0,0,0,.28);
}

/* Edge fade for browsers that support CSS masking */
@supports (
    (-webkit-mask-image: radial-gradient(circle, black, transparent)) or
    (mask-image: radial-gradient(circle, black, transparent))
){

    .platform-hero-image img{

        -webkit-mask-image:
            radial-gradient(
                circle at center,
                black 68%,
                rgba(0,0,0,.98) 76%,
                rgba(0,0,0,.88) 84%,
                rgba(0,0,0,.55) 92%,
                transparent 100%
            );

        mask-image:
            radial-gradient(
                circle at center,
                black 68%,
                rgba(0,0,0,.98) 76%,
                rgba(0,0,0,.88) 84%,
                rgba(0,0,0,.55) 92%,
                transparent 100%
            );
    }
}
/* Ecosystem Footer */
.platform-ecosystem-footer{
    grid-column:1 / -1;
    width:100%;
    
    padding:14px 0 0;
    border-top:1px solid rgba(93,156,255,.22);
}

.platform-ecosystem-footer h2{
    margin:0 0 16px;
    text-align:center;
    color:#fff;
    
    
    letter-spacing:-.02em;
}

.platform-ecosystem-items{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    max-width:var(--platform-content-width);
    margin:0 auto;
}

.platform-ecosystem-item{
    min-width:0;
    padding:0 18px;
    text-align:center;

}

.platform-ecosystem-item:last-child{
    border-right:none;
}

.platform-ecosystem-item svg{
    width:48px;
    height:48px;
    margin:0 auto 8px;
    fill:none;
    stroke:#18f1ff;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 10px rgba(24,241,255,.55));
}

.platform-ecosystem-item svg text{
    fill:#18f1ff;
    stroke:none;
    font-family:"Segoe UI", Tahoma, Verdana, sans-serif;
}

.platform-ecosystem-item h3{
    margin:0 0 6px;
    color:#fff;


}

.platform-ecosystem-item p{
    margin:0 auto;
    max-width:180px;
    color:rgba(255,255,255,.75);
    
    
}

/* Custom SVG Sizes */
.platform-exch-icon{
    width:72px !important;
    height:62px !important;
    margin-bottom:-2px !important;
}

.platform-control-icon{
    width:64px !important;
    height:54px !important;
    margin-bottom:6px !important;
}

.platform-audit-icon{
    width:92px !important;
    height:82px !important;
    margin-bottom:-24px !important;
}

.platform-audit-icon-workflow{
    width:72px !important;
    height:62px !important;
    margin-left:20px !important;
    margin-bottom:-3px !important;
}

.platform-ai-icon{
    width:60px !important;
    height:50px !important;
    margin-top:-3px !important;
    margin-bottom:12px !important;
}

/* Shared Slide Content */
.platform-content{
    max-width:var(--platform-content-width);
    height:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.platform-content h2{
    margin:0 0 20px;
    font-size:clamp(2.4rem, 4vw, 4rem);
    line-height:1.1;
    font-weight:820;
    letter-spacing:-.04em;
}


/* Security Cards */
.platform-card-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
    width:100%;
}

.platform-card{
    min-height:240px;
    padding:32px 26px;
    border:1px solid rgba(93,156,255,.24);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(8,28,58,.76), rgba(4,14,31,.5));
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.platform-icon{
    width:68px;
    height:68px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(24,241,255,.45);
    border-radius:18px;
    background:rgba(24,241,255,.08);
    font-size:1.8rem;
    box-shadow:0 0 24px rgba(24,241,255,.14);
}

.platform-card h3,
.platform-benefits h3{
    margin:0 0 12px;
    font-size:1.18rem;
    line-height:1.25;
    font-weight:800;
}

.platform-card p,
.platform-benefits p{
    margin:0;
    color:rgba(255,255,255,.74);
    font-size:1rem;
    line-height:1.6;
}

/* Architecture Flow */
.platform-flow{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:18px;
    width:100%;
    margin-top:20px;
}

.platform-flow div{
    position:relative;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    border:1px solid rgba(24,241,255,.35);
    border-radius:18px;
    background:linear-gradient(135deg, rgba(9,35,74,.9), rgba(6,18,42,.72));
    color:#fff;
    font-weight:800;
    text-align:center;
}

.platform-flow div:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    color:#18f1ff;
    font-size:1.5rem;
    font-weight:900;
    z-index:2;
}


/* Final Slide */
.platform-final p{
    max-width:850px;
    margin:10px auto 0;
    color:rgba(255,255,255,.78);
    font-size:1.2rem;
    line-height:1.8;
}


/* Laptops */
@media (min-width:821px) and (max-width:1280px){

    .platform-page{
        height:auto;
        min-height:calc(100vh - 74px);
    }

    .platform-slide{
        height:auto;
        min-height:calc(100vh - 74px);
       
        overflow:visible;
    }


    .platform-hero-image img{
        max-width:500px;
        border-radius:16px;
    }

    .platform-ecosystem-footer{
        margin-top:18px;
        padding-top:18px;
    }

    .platform-ecosystem-footer h2{
        font-size:1.1rem;
        margin-bottom:12px;
    }

    .platform-ecosystem-items{
        grid-template-columns:repeat(5, 1fr);
        max-width:1060px;
    }

    .platform-ecosystem-item{
        padding:0 10px;
     
    }

    .platform-ecosystem-item:last-child{
        border-right:none;
    }

    .platform-ecosystem-item h3{
        font-size:.74rem;
        margin-bottom:4px;
    }

    .platform-ecosystem-item p{
        font-size:.64rem;
        line-height:1.28;
    }

    .platform-exch-icon{
        width:58px !important;
        height:48px !important;
    }

    .platform-control-icon{
        width:50px !important;
        height:42px !important;
    }

    .platform-audit-icon{
        width:70px !important;
        height:60px !important;
        margin-bottom:-16px !important;
    }

    .platform-audit-icon-workflow{
        width:56px !important;
        height:48px !important;
        margin-left:10px !important;
    }

    .platform-ai-icon{
        width:48px !important;
        height:40px !important;
        margin-bottom:8px !important;
    }
}
/* Tablets */
@media (max-width:820px){
    .platform-page{
        height:auto;
        min-height:calc(100vh - 74px);
        overflow:hidden;
    }

    .platform-tabs{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:clamp(18px, 4vw, 32px);
        padding:28px 16px 8px;
        overflow:visible;
        white-space:nowrap;
    }

    .platform-tab{
        font-size:clamp(.76rem, 2.4vw, 1rem);
        padding-bottom:12px;
        flex:0 1 auto;
    }

    .platform-slider,
    .platform-track,
    .platform-slide{
        min-height:calc(100vh - 74px);
    }

    .platform-slide{
        height:auto;
        overflow-y:auto;

    }


    .platform-hero-image{
        width:100%;
    }

    .platform-hero-image img{
        max-width:680px;
        width:100%;
    }

    .platform-ecosystem-footer{
        width:100%;
        margin-top:4px;
        padding-top:24px;
    }

    .platform-ecosystem-items{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:26px 0;
        max-width:680px;
    }

    .platform-ecosystem-item{
        border-right:none;
        padding:0 18px;
    }

    .platform-ecosystem-item p{
        font-size:.78rem;
    }

    .platform-content{
        justify-content:flex-start;
        padding-top:60px;
        padding-bottom:60px;
    }

    .platform-card-grid,
    .platform-flow{
        grid-template-columns:1fr;
        max-width:680px;
    }

    .platform-flow div:not(:last-child)::after{
        content:"↓";
        right:auto;
        top:auto;
        left:50%;
        bottom:-25px;
        transform:translateX(-50%);
    }
	
	
}

/* Mobile */
@media (max-width:640px){

    .platform-tabs{
        gap:clamp(10px, 3vw, 18px);
        padding:42px 8px 8px;
    }

.platform-tab{
    font-size:clamp(.78rem, 3.4vw, .98rem);
    padding-bottom:10px;
}


    .platform-hero-image img{
        width:100%;
        max-width:100%;
        border-radius:14px;
    }

    .platform-ecosystem-footer{
        margin-top:4px;
        padding-top:22px;
    }

    .platform-ecosystem-footer h2{
        font-size:1.18rem;
        line-height:1.25;
        margin-bottom:18px;
    }

    .platform-ecosystem-items{
        display:grid;
        grid-template-columns:1fr;
        gap:13px;
        max-width:360px;
        margin:0 auto;
    }

    .platform-ecosystem-item{
        position:relative;
        padding:0 0 0 22px;
        text-align:left;
        border-right:none;
    }

    .platform-ecosystem-item::before{
        content:"";
        position:absolute;
        left:0;
        top:.38rem;
        width:8px;
        height:8px;
        border-radius:50%;
        background:#18f1ff;
        box-shadow:0 0 12px rgba(24,241,255,.85);
    }

    .platform-ecosystem-item svg{
        display:none !important;
    }

    .platform-ecosystem-item h3{
        margin:0 0 3px;
        font-size:.88rem;
        line-height:1.2;
    }

    .platform-ecosystem-item p{
        margin:0;
        max-width:none;
        font-size:.78rem;
        line-height:1.32;
    }

    .platform-content{
        padding-top:48px;
        padding-bottom:48px;
    }

    .platform-content h2{
        font-size:2.2rem;
    }

    .platform-card-grid,
    .platform-flow{
        grid-template-columns:1fr;
        max-width:100%;
    }

    .platform-card{
        min-height:auto;
        padding:28px 22px;
    }

    .platform-flow div{
        min-height:96px;
        padding:18px;
    }

    .platform-final p{
        font-size:1rem;
        line-height:1.65;
    }


}

/* Very Small Mobile */
@media (max-width:420px){
    .platform-tabs{
        gap:8px;
        padding-left:4px;
        padding-right:4px;
    }

.platform-tab{
    font-size:clamp(.72rem, 3.05vw, .84rem);
    letter-spacing:-.03em;
}

    .platform-slide{
        padding-left:14px;
        padding-right:14px;
    }


}


/* ----------------------------------------------------------- */


/* Security Slide */
.platform-security-image-slide{
    height:auto;
    min-height:calc(100vh - 74px);
    padding:48px 28px 56px;
    overflow-y:auto;
}

.security-page-header{
    max-width:var(--platform-content-width);
    margin:0 auto 26px;
    text-align:left;
}

.security-page-header h2{
    margin:0 0 12px;
    color:#fff;
    font-size:clamp(2.4rem, 4vw, 4.5rem);
    line-height:1.05;
    font-weight:820;
    letter-spacing:-.045em;
}

.security-page-header p{
    max-width:780px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:clamp(1rem, 1.35vw, 1.2rem);
    line-height:1.6;
}


/* Expanded Security Content */
.security-expanded-grid{
    
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.security-expanded-item{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:16px;
    align-items:flex-start;
    padding:22px 22px;


}

.security-expanded-item svg{
    width:52px;
    height:52px;
    fill:none;
    stroke:#18f1ff;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 10px rgba(24,241,255,.5));
}

.security-expanded-item h3{
    margin:0 0 7px;
    color:#fff;
    font-size:1rem;
    line-height:1.25;
    font-weight:800;
}

.security-expanded-item p{
    margin:0;
    color:rgba(255,255,255,.76);
    font-size:.9rem;
    line-height:1.55;
}

/* Laptop */
@media (min-width:821px) and (max-width:1280px){
    .platform-security-image-slide{
        padding:48px 28px 56px;
    }

    .security-page-header,
    .security-expanded-grid{
        width:min(100%, var(--platform-content-width));
    }


    .security-page-header h2{
        font-size:3.1rem;
    }

    .security-page-header p{
        font-size:.98rem;
    }

    .security-expanded-item{
        grid-template-columns:50px 1fr;
        gap:14px;
        padding:18px;
    }

    .security-expanded-item svg{
        width:46px;
        height:46px;
    }

    .security-expanded-item h3{
        font-size:.92rem;
    }

    .security-expanded-item p{
        font-size:.8rem;
        line-height:1.45;
    }
}

/* Tablet */
@media (max-width:820px){
    .platform-security-image-slide{
        padding:48px 28px 56px;
    }

    .security-page-header{
        text-align:center;
        margin-bottom:22px;
    }

    .security-page-header p{
        margin:0 auto;
    }


    .security-expanded-grid{
        grid-template-columns:1fr;
        max-width:680px;
    }

    .security-box{
        display:none;
    }
}

/* Mobile */
@media (max-width:640px){
    .platform-security-image-slide{
        padding:48px 28px 56px; !important;
    }

    .security-page-header{
        margin-bottom:20px;
    }

    .security-page-header h2{
        font-size:2.25rem;
    }

    .security-page-header p{
        font-size:.92rem;
        line-height:1.55;
    }


    .security-expanded-item{
        grid-template-columns:46px 1fr;
        gap:13px;
        padding:17px 15px;
        border-radius:16px;
    }

    .security-expanded-item svg{
        width:42px;
        height:42px;
    }

    .security-expanded-item h3{
        font-size:.92rem;
        margin-bottom:5px;
    }

    .security-expanded-item p{
        font-size:.78rem;
        line-height:1.42;
    }
}


/* ----------------------------------------------------------- */


/* Clean Tab Slider Animation */
html,
body {
    overflow-x: clip !important;
}


.platform-track{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    overflow:hidden;
    transform:none;
}

.platform-slide{
    position:absolute;
    inset:0;


    height:auto;
    min-height:0;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    max-height:0;
    overflow:hidden;

    transform:translateX(18px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility 0s linear .45s;
}

.platform-slide.is-active{
    position:relative;

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    max-height:none;
    overflow:visible;

    transform:translateX(0);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility 0s linear 0s;
}

/* Align Platform and Security content on desktop */
@media (min-width:821px){


    .security-page-header,
    .security-expanded-grid{
        width:min(100%, var(--platform-content-width));
        max-width:var(--platform-content-width);
        margin-left:auto;
        margin-right:auto;
    }
	

}


.security-expanded-item--with-image{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:0;
    overflow:hidden;
}

.security-expanded-visual{
    width:100%;
    height:150px;
    min-height:0;
    overflow:hidden;
	
}


.security-expanded-visual::before,
.security-expanded-visual::after{
    display:none;
}

.security-expanded-copy{
    padding:0px 28px 28px;
    display:block;
	margin-top:-20px;
	z-index:20;
}

.security-expanded-copy h3{
    margin:0 0 5px;
}

.security-expanded-copy p{
    margin:0;
}


.security-expanded-item{
    

    border-radius:20px;


    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.security-expanded-item--with-image{
    border:1px solid rgba(104,168,255,.30);
    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(11,24,50,.96) 0%,
            rgba(7,18,37,.98) 100%
        );

box-shadow:
    0 8px 24px rgba(0,0,0,.20),
    0 18px 40px rgba(0,0,0,.12);
}
.security-expanded-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:40% center;

    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 88%,
        rgba(0,0,0,.95) 92%,
        rgba(0,0,0,.55) 97%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 88%,
        rgba(0,0,0,.95) 92%,
        rgba(0,0,0,.55) 97%,
        transparent 100%
    );
}


@media (max-width:640px){
    .security-expanded-item--with-image{
        grid-template-columns:1fr;
        gap:0;
        padding:0;
        text-align:center;
    }

    .security-expanded-visual{
        min-height:190px;
    }


    .security-expanded-copy{
        padding:22px 18px 26px;
			
    }

}


.security-expanded-grid{
    align-items:stretch;
}

.security-expanded-grid:has(.security-expanded-item.is-open){
    align-items:start;
}

.security-expanded-grid:has(.security-expanded-item.is-open) .security-expanded-item{
    height:auto;
    align-self:start;
}

.security-expanded-item{
    position:relative;
    align-self:stretch;
}

.security-expanded-copy{
    position:static;
    padding-bottom:72px;
}

.security-read-more{
    position:absolute;
    right:26px;
    bottom:18px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:6px 12px;
    border:1px solid rgba(78,243,255,.55);
    border-radius:8px;

    background:rgba(78,243,255,.08);
    box-shadow:0 0 16px rgba(78,243,255,.18);

    color:#4EF3FF;
    font-size:.9rem;
    font-weight:800;
    cursor:pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        color .25s ease;
}

.security-read-more:hover{
    background:rgba(78,243,255,.12);
    border-color:rgba(78,243,255,.85);
    box-shadow:
        0 4px 12px rgba(0,0,0,.18),
        0 0 10px rgba(78,243,255,.12);
    transform:translateY(-1px);
}

.security-read-more svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;

    transform:rotate(90deg);
    transition:transform .25s ease;
}

.security-expanded-item.is-open .security-read-more svg{
    transform:rotate(-90deg);
}

.security-more-content{
    max-height:0;
    opacity:0;
    overflow:hidden;
    margin-top:0;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        margin-top .25s ease;
}

.security-expanded-item.is-open .security-more-content{
    opacity:1;
    margin-top:18px;
}

.security-more-content p{
    margin:0;
    line-height:1.7;
}

.security-more-content p + p{
    margin-top:18px;
}


.platform-architecture-slide{
    padding:70px 0;
}


.architecture-header{
    max-width:760px;
    margin:0 auto 42px;
}

.architecture-header h2{
    margin:0 0 16px;
    color:#fff;
    font-size:2.35rem;
    line-height:1.12;
    text-align:center;
}

.architecture-header .platform-intro{
    margin:0;
    text-align:left;
    color:rgba(255,255,255,.78);
    line-height:1.8;
}


.architecture-journey{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5, minmax(190px, 1fr));
    gap:18px;
    align-items:stretch;
    width:100%;
    margin-top:0;
    margin-bottom:34px;
}

.architecture-step{
    position:relative;
    min-height:490px;
    padding:14px 6px 0 16px;

    border:1px solid rgba(24,241,255,.32);
    border-radius:14px;

    background:
        radial-gradient(circle at 50% 8%, rgba(24,241,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(4,42,55,.88), rgba(2,13,31,.96));

    box-shadow:
        inset 0 0 22px rgba(24,241,255,.04),
        0 14px 34px rgba(0,0,0,.28);

    overflow:hidden;
    text-align:center;
    color:#fff;
}

.architecture-step::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
    pointer-events:none;
}

.architecture-step::after{
    display:none;
}


.journey-icon{
    position:relative;
    z-index:2;

    width:140px;
    height:140px;
    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.architecture-step h3,
.architecture-step p{
    position:relative;
    z-index:2;
}

.architecture-step h3{
    margin:0 0 18px;

    color:#fff;
    font-size:1.2rem;
    line-height:1.25;
    font-weight:900;

    text-align:left;
}

.architecture-step p{
    margin:0 auto;
    max-width:220px;

    color:rgba(255,255,255,.82);
    font-size:.92rem;
    line-height:1.7;

    text-align:left;
	margin-top:-10px;
}
.architecture-step.is-active{
    border-color:rgba(24,241,255,.72);

    background:
        radial-gradient(circle at 50% 8%, rgba(24,241,255,.16), transparent 36%),
        linear-gradient(180deg, rgba(8,70,90,.88), rgba(2,13,31,.96));

    box-shadow:
        0 0 0 1px rgba(24,241,255,.18),
        0 0 26px rgba(24,241,255,.16),
        inset 0 0 28px rgba(24,241,255,.06);
}

@media (max-width:1200px){
    .architecture-journey{
        grid-template-columns:repeat(5, minmax(160px, 1fr));
        gap:14px;
    }

    .architecture-step{
    min-height:430px;
    padding:14px 6px 0 16px;
    }


    .architecture-step h3{
        font-size:1.05rem;
    }

    .architecture-step p{
        font-size:.86rem;
    }
}

.step-secure-transfer{
    border-color:rgba(24,117,227,.34);

    background:
        radial-gradient(circle at 50% 8%, rgba(24,117,227,.10), transparent 34%),
        linear-gradient(180deg, rgba(7,34,74,.88), rgba(2,13,31,.96));
}

.step-secure-transfer > span{
    color:#1875E3;
    font-weight:900;
    text-shadow:0 0 10px rgba(24,117,227,.30);
}

.step-secure-transfer.is-active{
    border-color:rgba(24,117,227,.72);

    background:
        radial-gradient(circle at 50% 8%, rgba(24,117,227,.16), transparent 36%),
        linear-gradient(180deg, rgba(11,52,112,.88), rgba(2,13,31,.96));

    box-shadow:
        0 0 0 1px rgba(24,117,227,.18),
        0 0 26px rgba(24,117,227,.16),
        inset 0 0 28px rgba(24,117,227,.06);
}


.step-expert-workspace{
    border-color:rgba(173,101,255,.34);

    background:
        radial-gradient(circle at 50% 8%, rgba(173,101,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(34,16,58,.88), rgba(7,10,30,.96));
}

.step-expert-workspace > span{
    color:#AD65FF;
    text-shadow:0 0 12px rgba(173,101,255,.38);
}

.step-expert-workspace.is-active{
    border-color:rgba(173,101,255,.72);

    background:
        radial-gradient(circle at 50% 8%, rgba(173,101,255,.16), transparent 36%),
        linear-gradient(180deg, rgba(52,24,82,.88), rgba(7,10,30,.96));

    box-shadow:
        0 0 0 1px rgba(173,101,255,.18),
        0 0 26px rgba(173,101,255,.16),
        inset 0 0 28px rgba(173,101,255,.06);
}


.step-controlled-docs{
    border-color:rgba(255,145,48,.34);

    background:
        radial-gradient(circle at 50% 8%, rgba(255,145,48,.10), transparent 34%),
        linear-gradient(180deg, rgba(56,30,8,.88), rgba(12,10,7,.96));
}

.step-controlled-docs > span{
    color:#FF9130;
    text-shadow:0 0 12px rgba(255,145,48,.40);
}

.step-controlled-docs.is-active{
    border-color:rgba(255,145,48,.72);

    background:
        radial-gradient(circle at 50% 8%, rgba(255,145,48,.18), transparent 36%),
        linear-gradient(180deg, rgba(78,42,10,.90), rgba(12,10,7,.96));

    box-shadow:
        0 0 0 1px rgba(255,145,48,.18),
        0 0 26px rgba(255,145,48,.16),
        inset 0 0 28px rgba(255,145,48,.06);
}

.step-audit-delivery{
    border-color:rgba(37,129,26,.34);

    background:
        radial-gradient(circle at 50% 8%, rgba(37,129,26,.10), transparent 34%),
        linear-gradient(180deg, rgba(14,48,12,.88), rgba(2,13,31,.96));
}

.step-audit-delivery > span{
    color:#25811A;
    text-shadow:0 0 12px rgba(37,129,26,.38);
}

.step-audit-delivery.is-active{
    border-color:rgba(37,129,26,.72);

    background:
        radial-gradient(circle at 50% 8%, rgba(37,129,26,.16), transparent 36%),
        linear-gradient(180deg, rgba(22,70,18,.90), rgba(2,13,31,.96));

    box-shadow:
        0 0 0 1px rgba(37,129,26,.18),
        0 0 26px rgba(37,129,26,.16),
        inset 0 0 28px rgba(37,129,26,.06);
}
@media (max-width:900px){
    .architecture-journey{
        grid-template-columns:1fr;
    }

    .architecture-step{
    min-height:490px;
    padding:14px 6px 0 16px;
    }

    .architecture-step p{
        max-width:520px;
    }
}


.connect-diagram {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;

}

.connect-diagram svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
}
/* =========================================================
   ICONS
========================================================= */

.connect-diagram .diagram-icon,
.connect-diagram .client-icon {
    pointer-events: none;
}

.connect-diagram .diagram-icon {
    width: 44px;
    height: 44px;
}

.connect-diagram .innoexchange-icon {
    width: 62px;
    height: 62px;
    transform: translate(-15px, 0);
}


/* =========================================================
   FLOW LINES
========================================================= */

.connect-diagram .flow-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.connect-diagram .flow-line-dashed {
    stroke-dasharray: 2 8;
}


/* =========================================================
   ANIMATED DATA DOTS
========================================================= */

.connect-diagram .flow-dot {
    stroke: none;
    pointer-events: none;
}


/* =========================================================
   SVG LAYERS
========================================================= */

.connect-diagram .diagram-flow-paths,
.connect-diagram .diagram-flow-dots,
.connect-diagram .diagram-block-layer {
    pointer-events: none;
}

.connect-diagram .secure-api-icon {
    width: 26px ;
    height: 26px;
	    transform:translateX(-10px);
}
/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .connect-diagram animateMotion {
        display: none;
    }
}


.connect-diagram-header {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto 28px;
	
}

.connect-diagram-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.connect-diagram-number {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;
    border: 1px solid #a66cff;
    background: rgba(166,108,255,.18);

    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.connect-diagram-heading h3 {
    margin: 0;

    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.connect-diagram-header p {
    margin: 0;

    max-width: 980px;

    color: rgba(255,255,255,.78);

    font-size: 1rem;
    line-height: 1.8;

    text-align: left;
}


.platform-principles-panel{
    position:relative;

    width:100%;
    max-width:1180px;

    margin:-10px auto 28px;
    padding:22px 24px 0;

    overflow:visible;
}


/* =========================================================
   HEADER
========================================================= */

.platform-principles-header {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 28px;
}

.platform-principles-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    border: 1px solid #a66cff;
    border-radius: 7px;

    background: rgba(166, 108, 255, 0.16);

    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.platform-principles-header h2 {
    margin: 0;

    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
}


/* =========================================================
   PRINCIPLES GRID
========================================================= */

.platform-principles-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    align-items:stretch;
    padding-bottom:0;
}


/* =========================================================
   PRINCIPLE ITEM
========================================================= */

.platform-principle-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    padding: 4px 18px 0;

    text-align: center;
}


/* =========================================================
   ICONS
========================================================= */

.platform-principle-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 82px;

    margin-bottom: 5px;
}

.platform-principle-icon img {
    display: block;

    width: 74px;
    height: 74px;

    object-fit: contain;

    pointer-events: none;
}


/* =========================================================
   TEXT
========================================================= */

.platform-principle-item h3 {
    margin: 0 0 13px;

    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
}

.platform-principle-item p {
    margin: 0;

    color: rgba(255, 255, 255, 0.73);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
margin-top: -5px;
  
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .platform-principles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 34px;
    }

    .platform-principle-item:nth-child(3)::after {
        display: none;
    }

    .platform-principle-item:nth-child(n + 4) {
        padding-top: 28px;
        border-top: 1px solid rgba(148, 175, 211, 0.2);
    }
}


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

@media (max-width: 680px) {

    .platform-principles-panel {
        padding: 20px 18px 12px;
    }

    .platform-principles-header {
        margin-bottom: 24px;
    }

    .platform-principles-header h2 {
        font-size: 1.3rem;
    }

    .platform-principles-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .platform-principle-item {
        padding: 24px 10px;
    }

    .platform-principle-item:not(:last-child)::after {
        display: none;
    }

    .platform-principle-item:not(:first-child) {
        border-top: 1px solid rgba(148, 175, 211, 0.22);
    }

    .platform-principle-icon {
        width: 82px;
        height: 72px;
    }

    .platform-principle-icon img {
        width: 64px;
        height: 64px;
    }
}


/* =========================================================
   WHY IT MATTERS SLIDE
========================================================= */


.platform-outcomes-header {
    margin: 0 auto 34px;
}


/* =========================================================
   TWO-COLUMN CARD GRID
========================================================= */

.platform-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;


}


/* =========================================================
   CARD
========================================================= */

.platform-outcome-card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    align-items: stretch;

    width: 100%;
    height: 250px;

    overflow: hidden;

    border: 1px solid rgba(109, 168, 255, 0.42);
    border-radius: 9px;

    background: #061225;
}

.platform-outcome-card::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 4;

    border-radius: inherit;

    box-shadow:
        inset 0 0 22px rgba(38, 112, 216, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    pointer-events: none;
}


/* =========================================================
   TEXT AREA
========================================================= */

.platform-outcome-copy {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    min-width: 0;
    height: 100%;

    padding: 26px 18px 22px 24px;

    text-align: left;

    background:
        linear-gradient(
            90deg,
            rgba(3, 15, 36, 1) 0%,
            rgba(3, 17, 41, 0.98) 72%,
            rgba(3, 17, 41, 0.76) 100%
        );
}


/* =========================================================
   HEADING
========================================================= */

.platform-outcome-heading {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: 9px;
    margin: 0 0 14px;

    text-align: left;
}

.platform-outcome-number {
    flex: 0 0 auto;

    padding-top: 2px;

    color: #52b7ff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
}

.platform-outcome-divider {
    width: 1px;
    height: 27px;
    flex: 0 0 1px;

    background: rgba(112, 176, 235, 0.4);
}

.platform-outcome-heading h3 {
    min-width: 0;
    margin: 0;

    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.28;

    text-align: left;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.platform-outcome-copy p {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.62;

    text-align: left;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.platform-outcome-visual {
    position: relative;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(47, 140, 255, 0.16),
            transparent 65%
        ),
        #061225;
}

.platform-outcome-visual::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 17, 41, 0.86) 0%,
            rgba(3, 17, 41, 0.34) 20%,
            transparent 52%
        );
}

.platform-outcome-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

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

    .platform-outcome-card {
        grid-template-columns: minmax(0, 52%) minmax(0, 48%);
        height: 230px;
    }

    .platform-outcome-copy {
        padding: 26px 26px;
    }

    .platform-outcome-heading h3 {
        font-size: 1.1rem;
    }

    .platform-outcome-copy p {
        font-size: 0.88rem;
    }
}


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

@media (max-width: 680px) {

    .platform-outcomes-slide {
        padding-top: 28px;
    }

    .platform-outcomes-header {
        margin-bottom: 24px;
    }

    .platform-outcomes {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .platform-outcome-card {
        grid-template-columns: 1fr;
        height: auto;
    }

    .platform-outcome-copy {
        min-height: 185px;
        padding: 24px 20px;
    }

    .platform-outcome-heading {
        margin-bottom: 12px;
    }

    .platform-outcome-heading h3 {
        font-size: 1.08rem;
    }

    .platform-outcome-copy p {
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .platform-outcome-visual {
        height: 190px;
    }

    .platform-outcome-visual::after {
        background:
            linear-gradient(
                180deg,
                rgba(3, 17, 41, 0.8) 0%,
                transparent 32%
            );
    }
}

.platform-diagram-wrapper{
    grid-column:1 / -1;
    
}


.platform-diagram-wrapper .connect-diagram svg{
    display:block;
    width:100%;
    height:auto;
}


.platform-diagram-title{
    width:100%;
    max-width:1180px;

    margin:0 auto 14px;


    text-align:left;
}
.platform-diagram-title h2{
    margin:0 0 14px;

    font-size:clamp(2.6rem,4vw,4rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-0.04em;

    white-space:nowrap;
}

.platform-diagram-title p{
    margin:0;

    width:100%;
    max-width:760px;

    color:rgba(255,255,255,.78);
    font-size:1.05rem;
    line-height:1.75;

    text-align:left;
}

.platform-diagram-wrapper .connect-diagram{
    margin-top:-20px;
}

/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width:821px) and (max-width:1280px){

    .platform-diagram-title{
        width:100%;
        max-width:1000px;
        margin:0 auto 8px;

    }

    .platform-diagram-title h2{
        font-size:2.6rem;
        margin-bottom:10px;
    }

    .platform-diagram-title p{
        max-width:640px;
        font-size:.9rem;
        line-height:1.6;
    }

    .platform-diagram-wrapper{
        width:min(94%,940px);
		 margin:24px auto 0;
    }

    .platform-diagram-actions{
        margin-top:16px;
    }


}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:820px){

    .platform-diagram-title{
        width:100%;

        margin-bottom:10px;
        text-align:left;
    }

    .platform-diagram-title h2{
        font-size:2.1rem;
        line-height:1.12;
    }

    .platform-diagram-title p{
        max-width:100%;
        font-size:.9rem;
        line-height:1.65;
    }

    .platform-diagram-wrapper{
        width:100%;
		margin-top:28px;
    }

    .platform-diagram-actions{
        justify-content:center;
        margin-top:18px;
    }


}

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

@media (max-width:640px){

    .platform-diagram-title{

        margin-bottom:8px;
    }

    .platform-diagram-title h2{
        font-size:1.8rem;
        line-height:1.12;
        letter-spacing:-.03em;
    }

    .platform-diagram-title p{
        font-size:.85rem;
        line-height:1.55;
    }

    .platform-diagram-wrapper{
        width:100%;
		 margin-top:34px;
    }

    .platform-diagram-actions{
        justify-content:center;
        margin-top:16px;
    }


}

/* =========================================================
   INNOVENTECH PLATFORM SIDE MENU
========================================================= */

.innoplatform-side-menu,
.innoplatform-side-menu *{
    box-sizing:border-box;
}


/* =========================================================
   BASE / DESKTOP
========================================================= */

.innoplatform-side-menu{

    z-index:500;

    width:188px;
    margin:0;
    padding:7px;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;

    border:1px solid rgba(105,157,226,.28);
    border-radius:12px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(30,119,255,.13),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            rgba(7,26,57,.97) 0%,
            rgba(4,16,38,.98) 100%
        );

    box-shadow:
        0 22px 48px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);

    isolation:isolate;
}

.innoplatform-side-link{
    appearance:none;
    -webkit-appearance:none;

    position:relative;

    
    min-width:0;
    min-height:43px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;

    margin:0;
    padding:10px 12px;

    overflow:hidden;

    border:1px solid transparent;
    border-radius:9px;
    outline:none;

    background:transparent;
    box-shadow:none;

    color:rgba(215,226,246,.72);

    font-family:"Segoe UI", Tahoma, Verdana, sans-serif;
    font-size:.82rem;
    font-weight:700;
    line-height:1.2;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;

    cursor:pointer;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.innoplatform-side-link::after{
    content:none;
    display:none;
}

.innoplatform-side-link svg{
    display:block;

    width:26px;
    height:26px;
    flex:0 0 19px;

    overflow:visible;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;

    transition:
        color .22s ease,
        filter .22s ease,
        transform .22s ease;
}

.innoplatform-side-link span{
    display:block;
    min-width:0;
    pointer-events:none;
}

.innoplatform-side-link:hover{
    
    border-color:rgba(73,145,255,.16);

    background:
        linear-gradient(
            90deg,
            rgba(30,112,238,.20) 0%,
            rgba(30,112,238,.07) 78%,
            transparent 100%
        );

    transform:translateX(2px);
}

.innoplatform-side-link:hover svg{
    color:#dffaff;
}

.innoplatform-side-link:focus-visible{
    color:#fff;
    border-color:rgba(24,241,255,.65);

    box-shadow:
        0 0 0 2px rgba(24,241,255,.15),
        0 0 15px rgba(24,241,255,.14);
}

.innoplatform-side-link.is-current{
    color:#fff;
    border-color:rgba(123,180,255,.32);

    background:
        linear-gradient(
            90deg,
            rgba(18,95,205,.54) 0%,
            rgba(16,67,145,.30) 67%,
            rgba(16,67,145,.10) 100%
        );

    box-shadow:
        inset 0 0 20px rgba(47,140,255,.11),
        0 6px 16px rgba(0,0,0,.15);
}

.innoplatform-side-link.is-current::before{
    content:"";

    position:absolute;
    top:7px;
    bottom:7px;
    left:-1px;

    width:3px;

    border-radius:10px;

    background:#18f1ff;

    box-shadow:
        0 0 7px rgba(24,241,255,.95),
        0 0 15px rgba(24,241,255,.42);
}

.innoplatform-side-link.is-current svg{
    color:#fff;
    filter:drop-shadow(0 0 5px rgba(24,241,255,.28));
}


/* =========================================================
   PLATFORM PAGE POSITIONING
========================================================= */


.platform-slider{
    width:100%;
    height:auto;
    
    overflow:hidden;
}


/* =========================================================
   LAPTOP
   821px to 1399px
========================================================= */

@media (min-width:821px) and (max-width:1399px){

 
    .innoplatform-side-link{
        min-height:39px;
        gap:10px;
        padding:8px 9px;

        font-size:.74rem;
    }

    .innoplatform-side-link svg{
        width:17px;
        height:17px;
        flex-basis:17px;
    }


    .platform-slide{
        padding-top:28px;
    }
}


/* =========================================================
   TABLET
   641px to 820px
========================================================= */

@media (min-width:641px) and (max-width:820px){

    .innoplatform-side-menu{
        top:auto;
        right:16px;
        bottom:16px;
        left:16px;

        width:min(680px, calc(100% - 32px));
        max-width:680px;
        margin:0 auto;
        padding:6px;

        flex-direction:row;
        justify-content:center;
        align-items:stretch;
        gap:3px;

        border-radius:11px;
    }

    .innoplatform-side-link{
        flex:1 1 0;

        width:auto;
        min-width:0;
        min-height:40px;

        justify-content:center;

        gap:7px;
        padding:8px;

        font-size:.72rem;
        text-align:center;
    }

    .innoplatform-side-link:hover{
        transform:none;
    }

    .innoplatform-side-link.is-current::before{
        top:auto;
        right:9px;
        bottom:-1px;
        left:9px;

        width:auto;
        height:3px;
    }


    .platform-slide{
        padding-top:30px;
    }
}


/* =========================================================
   MOBILE
   Up to 640px
========================================================= */

/* =========================================================
   MOBILE PLATFORM NAVIGATION
   Horizontal, scrollable, and part of the page flow
========================================================= */


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .innoplatform-side-link,
    .innoplatform-side-link svg{
        transition:none;
    }
}


/* =========================================================
   SHARED PLATFORM SLIDE LAYOUT
========================================================= */

:root{
    
    
    --platform-header-gap:20px;
}


/* Every slide uses the same outer spacing */
.platform-slide{
    width:100%;
    max-width:100%;
    padding:
        var(--platform-slide-top)
        clamp(24px, 3vw, 48px)
        56px;

    text-align:left;
}


/* Every slide uses the same content width and horizontal position */
.platform-slide-inner{
    width:min(100%, var(--platform-content-width));
    margin:0 auto;
}


/* Shared title and subtitle */
.platform-section-header{
    width:100%;
    margin:0 0 var(--platform-header-gap);
    text-align:left;
}

.platform-section-header h2{
    max-width:100%;
    margin:0 0 14px;

    color:#fff;
    font-size:clamp(2.4rem, 3.5vw, 3.6rem);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-.045em;

    text-align:left;
}

.platform-section-header p{
    width:100%;
    max-width:760px;
    margin:0;

    color:rgba(255,255,255,.82);
    font-size:1rem;
    line-height:1.68;

    text-align:left;
}


/* The platform diagram aligns with the shared content width */
.platform-diagram-wrapper{
    width:100%;
    max-width:none;
    margin:0 auto;
}

.platform-diagram-wrapper .connect-diagram{
    width:100%;
    max-width:none;
    margin:0;
}


/* Security content uses the same shared width */

.security-expanded-grid{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}


/* Architecture content uses the same shared width */
.architecture-content{
    width:min(100%, var(--platform-content-width));
    max-width:var(--platform-content-width);
    margin:0 auto;
}


/* Why It Matters uses the same shared width */
/* Why It Matters outer container */
.platform-outcomes-content{
    width:min(100%, var(--platform-content-width));
    max-width:var(--platform-content-width);
    margin:0 auto;
}

/* Cards grid inside the container */
.platform-outcomes{
    width:100%;
    max-width:none;
    margin:0;
}


/* =========================================================
   LAPTOP
   821px to 1399px
========================================================= */

@media (min-width:821px) and (max-width:1399px){


    .platform-section-header h2{
        font-size:clamp(2.25rem, 3.6vw, 3rem);
    }

    .platform-section-header p{
        max-width:700px;
        font-size:.95rem;
        line-height:1.62;
    }


}


/* =========================================================
   TABLET
   641px to 820px
========================================================= */

@media (min-width:641px) and (max-width:820px){

    :root{
        --platform-slide-top:26px;

    }

    .platform-slide{
        padding-right:24px;
        padding-bottom:90px;
        padding-left:24px;
    }

    .platform-slide-inner{
        width:100%;
    }

    .platform-section-header h2{
        font-size:2.35rem;
        line-height:1.08;
    }

    .platform-section-header p{
        max-width:100%;
        font-size:.94rem;
        line-height:1.6;
    }

    .security-expanded-grid{
        grid-template-columns:1fr;
        max-width:680px;
    }

    .security-box{
        display:none;
    }

    .architecture-journey{
        grid-template-columns:1fr;
    }

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


/* =========================================================
   MOBILE
   Up to 640px
========================================================= */

@media (max-width:640px){

    :root{
        --platform-slide-top:24px;

    }

    .platform-slide{
        padding-right:16px;

        padding-left:16px;
    }


    .platform-section-header h2{
        margin-bottom:12px;

        font-size:clamp(1.9rem, 9vw, 2.45rem);
        line-height:1.08;
        letter-spacing:-.035em;
    }

    .platform-section-header p{
        max-width:100%;

        font-size:.9rem;
        line-height:1.58;
    }


    .security-expanded-grid{
        grid-template-columns:1fr;
    }

    .architecture-journey{
        grid-template-columns:1fr;
    }

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

:root{
    --platform-content-width:1120px;

    --site-header-height:74px;


    --platform-layout-shift:22px;

    --platform-menu-top-adjustment:0px;

    
}


@media (min-width:1400px){

    .platform-slide-inner{
        width:var(--platform-content-width);
        max-width:var(--platform-content-width);

        margin-right:auto;

        margin-left:calc(
            50% -
            (var(--platform-content-width) / 2) +
            var(--platform-layout-shift)
        );
    }
}

@media (min-width:821px) and (max-width:1399px){

    :root{
        --platform-page-top:24px;
        --platform-slide-top:28px;


        --platform-layout-shift:0px;
    }


    .platform-slide{
        
        padding-bottom:48px;
        
    }
}

/* =========================================================
   LAPTOP: MENU AND CONTENT ALIGNMENT
   821px to 1399px
========================================================= */
/* =========================================================
   FINAL LAPTOP ALIGNMENT
   Applies equally to all four platform tabs
========================================================= */

@media (min-width:821px) and (max-width:1399px){

    :root{
        --platform-laptop-menu-left:14px;
        --platform-laptop-menu-width:164px;
        --platform-laptop-menu-gap:32px;
        --platform-laptop-right-space:28px;
		--platform-menu-top-adjustment:0px;
    }


    .platform-slide{
        padding-right:0;
        padding-left:0;
    }

    /* All four primary slide containers */
    .platform-slide > .platform-slide-inner{
        width:auto;
        max-width:var(--platform-content-width);

        margin-left:calc(
            var(--platform-laptop-menu-left) +
            var(--platform-laptop-menu-width) +
            var(--platform-laptop-menu-gap)
        );

        margin-right:var(--platform-laptop-right-space);
    }

    /* Prevent nested tab-specific classes from recentering */
    .platform-slide-inner.architecture-content,
    .platform-slide-inner.platform-outcomes-content{
        width:auto;
        max-width:var(--platform-content-width);

        margin-left:calc(
            var(--platform-laptop-menu-left) +
            var(--platform-laptop-menu-width) +
            var(--platform-laptop-menu-gap)
        );

        margin-right:var(--platform-laptop-right-space);
    }

    /* Inner content fills the shared slide container */
    .platform-diagram-wrapper,
    .security-expanded-grid,
    .architecture-journey,
    .platform-outcomes{
        width:100%;
        max-width:none;
        margin-right:0;
        margin-left:0;
    }


}


/* =========================================================
   MOBILE PLATFORM NAVIGATION
   Horizontal, scrollable, and part of the page flow
========================================================= */
/* =========================================================
   FINAL MOBILE PLATFORM NAVIGATION
   KEEP THIS AT THE VERY END OF platform.css
========================================================= */

@media (max-width:640px){

    /* Allow the menu and content to remain in normal page flow */
    .platform-page{
        height:auto !important;
        min-height:0 !important;
        padding-top:0 !important;
        overflow:visible !important;
    }


    /* Four equal tabs */
    .innoplatform-side-link{
        position:relative;

        width:100% !important;
        min-width:0 !important;
        min-height:48px;

        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:4px;
        padding:6px 3px;

        border-radius:8px;

        font-size:clamp(.52rem, 2.3vw, .63rem);
        line-height:1.08;
        text-align:center;
        white-space:normal;

        transform:none !important;
    }


    .innoplatform-side-link:hover{
        transform:none !important;
    }


    /* Icons */
    .innoplatform-side-link svg{
        width:15px;
        height:15px;
        flex:0 0 15px;
    }


    /* Keep labels centered */
    .innoplatform-side-link span{
        width:100%;
        overflow:hidden;

        text-align:center;
        text-overflow:ellipsis;
        white-space:nowrap;
    }


    /* Horizontal active indicator */
    .innoplatform-side-link.is-current::before{
        top:auto !important;
        right:6px !important;
        bottom:-1px !important;
        left:6px !important;

        width:auto !important;
        height:3px !important;

        border-radius:10px;
    }


    /* Remove the old slider offset */
    .platform-slider{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        margin-top:0 !important;

        overflow:visible !important;
    }


    .platform-track{
        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        transform:none !important;
        overflow:visible !important;
    }


    /* Hide inactive slides */
    .platform-slide{
        display:none !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        padding:
            0
            16px
            36px !important;

        overflow:visible !important;
    }


    /* Show selected slide */
    .platform-slide.is-active{
        position:relative;

        display:block !important;

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        max-height:none;
    }


    .platform-slide-inner{
        width:100% !important;
        max-width:none !important;

        margin-right:0 !important;
        margin-left:0 !important;
    }


    .platform-section-header{
        margin-bottom:26px;
    }
}

/* =========================================================
   ARCHITECTURE TITLE-TO-CONTENT SPACING
========================================================= */


/* Shared Architecture subheading wrapper */
.platform-architecture-slide .connect-diagram-header{
    width:100%;
    max-width:none;

    margin:
        0
        0
        var(--architecture-heading-gap);

    padding:0;
}


/* Remove internal margin that duplicates the header gap */
.platform-architecture-slide .connect-diagram-heading{


    margin:0;
}


/* Journey cards */
.platform-architecture-slide .architecture-journey{
    margin-top:0;
    margin-bottom:34px;
}


/* Principles panel */
.platform-architecture-slide .platform-principles-panel{
    margin-top:0;
}


/* Architecture diagram */
.platform-architecture-slide .connect-diagram{
    width:100%;
    max-width:none;

    margin-top:0;
    margin-right:0;
    margin-left:0;
}


/* Guarantee equal spacing after each Architecture heading */
.platform-architecture-slide .connect-diagram-header
    + .architecture-journey,
.platform-architecture-slide .connect-diagram-header
    + .platform-principles-panel,
.platform-architecture-slide .connect-diagram-header
    + .connect-diagram{
    margin-top:0;
}


.platform-slide-inner{
    padding:28px 30px 32px;

    
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(8,31,58,.50),
            rgba(3,17,38,.28)
        );

    
}


/* =========================================================
   PLATFORM ECOSYSTEM IMAGE BANNER
========================================================= */

.platform-ecosystem-banner{
    position:relative;

    width:calc(100% + 60px);
    min-height:330px;

    margin:-28px -30px 28px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:none;
    border-radius:16px 16px 0 0;

    background:transparent;
    box-shadow:none;
}


/* Image and horizontal text-protection gradient */
.platform-ecosystem-banner::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2,8,23,.98) 0%,
            rgba(2,10,26,.94) 30%,
            rgba(2,10,26,.58) 54%,
            rgba(2,10,26,.08) 76%,
            transparent 100%
        ),
        url("/images/platform-ecosystem-banner.png");

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

    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.96) 78%,
        rgba(0,0,0,.78) 86%,
        rgba(0,0,0,.42) 94%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.96) 78%,
        rgba(0,0,0,.78) 86%,
        rgba(0,0,0,.42) 94%,
        transparent 100%
    );

    pointer-events:none;
}


/* Remove the old colour overlay */
.platform-ecosystem-banner::after{
    display:none;
}

.platform-ecosystem-banner__content{
    position:relative;
    z-index:2;

    width:min(54%, 620px);
    padding:44px 48px;
}

.platform-ecosystem-banner__content h1{
    margin:0 0 18px;

    color:#fff;

    font-size:clamp(2.2rem, 3.2vw, 3.35rem);

    font-weight:820;
    line-height:1.08;
    letter-spacing:-.04em;

    white-space:nowrap;
}

.platform-ecosystem-banner__content p{
    width:100%;
    max-width:560px;
    margin:0;

    color:rgba(255,255,255,.84);
    font-size:1rem;
    line-height:1.7;
}

@media (min-width:821px) and (max-width:1399px){

    .platform-ecosystem-banner{
        min-height:290px;
    }

    .platform-ecosystem-banner__content{
        width:55%;
        padding:36px 38px;
    }

    .platform-ecosystem-banner__content h1{
        font-size:clamp(2.2rem, 3.5vw, 3.2rem);
    }

    .platform-ecosystem-banner__content p{
        max-width:500px;
        font-size:.92rem;
        line-height:1.62;
    }
}

@media (max-width:820px){

    .platform-ecosystem-banner{
        min-height:300px;

        align-items:flex-end;

        background-image:
            linear-gradient(
                180deg,
                rgba(2,8,23,.08) 0%,
                rgba(2,8,23,.55) 48%,
                rgba(2,8,23,.98) 100%
            ),
            url("/images/platform-ecosystem-banner.png");

        background-position:68% center;
    }

    .platform-ecosystem-banner__content{
        width:100%;
        padding:32px 28px;
    }
}

@media (max-width:640px){

    .platform-ecosystem-banner{
        min-height:310px;
        margin-bottom:24px;
        border-radius:12px;
        background-position:70% center;
    }

    .platform-ecosystem-banner__content{
        padding:28px 22px;
    }

    .platform-ecosystem-banner__content h1{
        margin-bottom:12px;
        font-size:clamp(2rem, 9vw, 2.65rem);
        line-height:1.06;
    }

    .platform-ecosystem-banner__content p{
        font-size:.88rem;
        line-height:1.58;
    }
}

.platform-security-banner::before{
    background-image:
        linear-gradient(
            90deg,
            rgba(2,8,23,.98) 0%,
            rgba(2,10,26,.94) 30%,
            rgba(2,10,26,.58) 54%,
            rgba(2,10,26,.08) 76%,
            transparent 100%
        ),
        url("/images/platform-security-banner.png");
}

.platform-architecture-banner::before{
    background-image:
        linear-gradient(
            90deg,
            rgba(2,8,23,.98) 0%,
            rgba(2,10,26,.94) 30%,
            rgba(2,10,26,.58) 54%,
            rgba(2,10,26,.08) 76%,
            transparent 100%
        ),
        url("/images/platform-architecture-banner.png");
}

.platform-outcomes-banner::before{
    background-image:
        linear-gradient(
            90deg,
            rgba(2,8,23,.98) 0%,
            rgba(2,10,26,.94) 30%,
            rgba(2,10,26,.58) 54%,
            rgba(2,10,26,.08) 76%,
            transparent 100%
        ),
        url("/images/platform-outcomes-banner.png");
}

/* Diagram Summary */
.architecture-diagram-summary{
    max-width:980px;
    margin:34px auto 44px;
    text-align:center;
}

.architecture-diagram-summary p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:1rem;
    line-height:1.85;
    font-weight:400;
}

/* =========================================================
   MOBILE HERO BANNERS — REMOVE IMAGES AND MOVE TEXT TO TOP
========================================================= */
@media (max-width:640px){

    /* Reset the shared hero banner */
    .platform-page .platform-ecosystem-banner{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 0 24px !important;
        padding:0 !important;

        display:flex !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;

        background:none !important;
        background-image:none !important;

        border-radius:0 !important;
        overflow:visible !important;
    }

    /* Remove all four hero images created by the pseudo-element */
    .platform-page .platform-ecosystem-banner::before,
    .platform-page .platform-security-banner::before,
    .platform-page .platform-architecture-banner::before,
    .platform-page .platform-outcomes-banner::before{
        content:none !important;
        display:none !important;
        background:none !important;
        background-image:none !important;
    }

    /* Keep any secondary overlay disabled */
    .platform-page .platform-ecosystem-banner::after{
        content:none !important;
        display:none !important;
    }

    /* Position the heading and paragraph at the top */
    .platform-page .platform-ecosystem-banner__content{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:22px 20px 20px !important;

        text-align:left !important;
    }

    /* Smaller mobile hero titles */
    .platform-page .platform-ecosystem-banner__content h1{
        margin:0 0 10px !important;

        font-size:clamp(1.75rem, 7.5vw, 2.15rem) !important;
        line-height:1.12 !important;
        letter-spacing:-.035em !important;

        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    /* Mobile hero description */
    .platform-page .platform-ecosystem-banner__content p{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;

        font-size:.9rem !important;
        line-height:1.58 !important;
    }
	.platform-architecture-slide .connect-diagram-heading h3{
    font-size:1.25rem;
    line-height:1.15;
}
	.platform-architecture-slide .connect-diagram-number{
    width:34px;
    height:34px;
    flex:0 0 34px;

    font-size:1.1rem;
    border-radius:8px;
}

.platform-architecture-slide .connect-diagram-heading{
    gap:10px;
}

/* Mobile - Compact Journey Cards */
.platform-architecture-slide .architecture-step{
    min-height:330px;
    padding:12px 14px 18px;
}
.platform-architecture-slide .journey-icon{
    width:95px;
    height:95px;
    margin:0 auto 12px;
}
.platform-architecture-slide .architecture-step h3{
    margin:0 0 10px;
    font-size:1.05rem;
}

.platform-architecture-slide .architecture-step p{
    margin-top:0;
    font-size:.86rem;
    line-height:1.55;
}

}


/* =========================================================
   FULL-WIDTH PLATFORM TOP BANNER
========================================================= */

:root{
    --platform-banner-height:150px;
    
}

/* Remove the old empty space above the Platform page */


/* New full-window-width banner */
.platform-top-banner{
    position:relative;
    z-index:10;


    margin:0;
    padding:0;


    background:#020817;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.platform-top-banner img{


    margin:0;
    padding:0;


    border:0;
    border-radius:0;
}

/* Main slide content begins immediately under the banner */


/* Remove any top edge from the main content container */


@media (min-width:821px){

    :root{
        
    }
}

/* Remove the upper rounded corners from the content hero */
.platform-page .platform-ecosystem-banner{
    border-radius:0 !important;
}


.platform-top-banner{
    width:100%;
    height:300px;
    overflow:hidden;
}

.platform-top-banner img{
    display:block;
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 48%;
}


/* =========================================================
   ATTACH PLATFORM CONTENT DIRECTLY TO TOP BANNER
========================================================= */

:root{
    --platform-page-top:0px;
    --platform-slide-top:0px;
}

.platform-page,
.platform-slider,
.platform-track,
.platform-slide{
    
    padding-top:0 !important;
}

.platform-slide-inner{
    margin-top:0 !important;
}

@media (min-width:821px){

    .innoplatform-side-menu{
        top:calc(
            var(--site-header-height) +
            var(--platform-banner-height)
        ) !important;
    }
}

.platform-ecosystem-banner__content{
    align-self:flex-start;
    padding-top:28px;   /* Adjust this value */
}

/* Large desktop screens */
@media (min-width: 1600px){

    .platform-top-banner{
        height:420px;
    }
	
	    .innoplatform-side-menu{
        top:calc(
            var(--site-header-height) +
            var(--platform-banner-height) +
            290px
        ) !important;
    }
}

/* ==========================
   Laptop
========================== */
@media (min-width:1024px) and (max-width:1599px){

    .innoplatform-side-menu{
        top:calc(
            var(--site-header-height) +
            var(--platform-banner-height) +
            140px
        ) !important;
    }
}


/* =========================================================
   OPTION 6 — INSET SHADOW DIVIDER
   Add at the very end of platform.css
========================================================= */

/* Content section directly below the hero */


/* Remove conflicting borders from the internal content container */
.platform-slide-inner{
    border-top:0 !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;

    
}


/* Ensure there is no gap between the hero and content */
.platform-top-banner{
    margin-bottom:0 !important;
}

.platform-page,
.platform-slider,
.platform-track,
.platform-slide{
    margin-top:0 !important;
}


.platform-diagram-wrapper{
    margin-top:-40px;
    position:relative;
    z-index:2;
}


/* Raise only the platform diagram */
.platform-diagram-wrapper svg{
    transform: translateY(-25px);
}

/* =========================================================
   PLATFORM MAIN HERO
   Image + side navigation + dynamic page title
========================================================= */

.platform-page {
    padding-top: 0 !important;
}

.platform-main-hero {
    

    width: 100%;
    height: clamp(430px, 31vw, 570px);

    overflow: hidden;


}


/* =========================================================
   HERO IMAGE
========================================================= */

.platform-main-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.platform-main-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   IMAGE SHADING
========================================================= */

.platform-main-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 28, 0.72) 0%,
            rgba(2, 11, 28, 0.18) 25%,
            rgba(2, 11, 28, 0) 56%
        ),
        linear-gradient(
            180deg,
            rgba(2, 10, 25, 0) 42%,
            rgba(2, 10, 25, 0.42) 64%,
            rgba(2, 10, 25, 0.92) 100%
        );
}


/* =========================================================
   HERO TITLE
========================================================= */

.platform-main-hero__content {
    position: absolute;

    right: clamp(28px, 7vw, 145px);
    bottom: 34px;
    left: clamp(235px, 16vw, 315px);

    z-index: 4;

    display: flex;
    align-items: stretch;
    gap: 18px;

    max-width: 890px;
}

.platform-main-hero__accent {
    width: 3px;
    min-height: 108px;
    flex: 0 0 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #18f1ff 0%,
            #1875e3 100%
        );

    box-shadow:
        0 0 8px rgba(24, 241, 255, 0.75),
        0 0 20px rgba(24, 241, 255, 0.26);
}

.platform-main-hero__copy {
    max-width: 780px;
}

.platform-main-hero__copy h1 {
    margin: 0 0 12px;


    font-size:
        clamp(2.35rem, 4vw, 4.2rem);

    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.05em;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.55);
}

.platform-main-hero__copy p {
    max-width: 760px;

    margin: 0;


    font-size:
        clamp(0.9rem, 1.1vw, 1.06rem);


    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.72);
}


/* =========================================================
   SIDE NAVIGATION INSIDE HERO
========================================================= */


.platform-main-hero
.innoplatform-side-link {
    min-height: 48px;
    font-size: 0.84rem;
}

.platform-main-hero
.innoplatform-side-link.is-current {
    border-color:
        rgba(91, 170, 255, 0.48);

    background:
        linear-gradient(
            90deg,
            rgba(18, 101, 226, 0.72) 0%,
            rgba(13, 67, 153, 0.40) 72%,
            rgba(13, 67, 153, 0.16) 100%
        );

    box-shadow:
        inset 0 0 22px rgba(47, 140, 255, 0.14),
        0 8px 18px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   CONTENT BELOW HERO
========================================================= */

.platform-slider {
    margin-top: 0 !important;
}

.platform-slide {
    padding-top: 28px !important;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 821px) and (max-width: 1399px) {

    .platform-main-hero {
        height: clamp(390px, 33vw, 500px);
    }

    .platform-main-hero
    .innoplatform-side-menu {
        left: 16px !important;
        width: 74px !important;
    }

    .platform-main-hero__content {
        right: 28px;
        bottom: 26px;
        left: 205px;

        gap: 15px;
    }

    .platform-main-hero__copy h1 {
        font-size:
            clamp(2.1rem, 4vw, 3.35rem);
    }

    .platform-main-hero__copy p {
        max-width: 670px;

        font-size: 0.9rem;
        line-height: 1.55;
    }

    .platform-main-hero__accent {
        min-height: 92px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 641px) and (max-width: 820px) {

    .platform-main-hero {
        height: 500px;
    }

    .platform-main-hero
    .innoplatform-side-menu {
        position: absolute !important;

        top: auto !important;
        right: 18px !important;
        bottom: 18px !important;
        left: 18px !important;

        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        width: auto !important;
        max-width: none !important;

        transform: none !important;
    }

    .platform-main-hero__content {
        top: auto;
        right: 28px;
        bottom: 102px;
        left: 28px;

        max-width: 680px;
    }

    .platform-main-hero__copy h1 {
        font-size: 2.65rem;
    }

    .platform-main-hero__copy p {
        max-width: 620px;
    }
}


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

@media (max-width: 640px) {

    .platform-main-hero {
        display: flex;
        flex-direction: column;

        height: auto;
        min-height: 0;

        overflow: visible;
    }

    .platform-main-hero__image {
        position: relative;

        width: 100%;
        height: 245px;
    }

    .platform-main-hero__image img {
        object-position: center;
    }

    .platform-main-hero__shade {
        height: 245px;

        background:
            linear-gradient(
                180deg,
                rgba(2, 10, 25, 0) 35%,
                rgba(2, 10, 25, 0.9) 100%
            );
    }

    .platform-main-hero__content {
        position: relative;

        inset: auto;

        order: 2;

        width: 100%;
        max-width: none;

        padding: 24px 18px 20px;

        gap: 13px;

        background:
            linear-gradient(
                180deg,
                #031126 0%,
                #020a19 100%
            );
    }

    .platform-main-hero__accent {
        min-height: 96px;
    }

    .platform-main-hero__copy h1 {
        margin-bottom: 10px;

        font-size:
            clamp(2rem, 9vw, 2.65rem);

        line-height: 1.04;
    }

    .platform-main-hero__copy p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .platform-main-hero
    .innoplatform-side-menu {
        position: relative !important;

        inset: auto !important;

        order: 3;

        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        width: calc(100% - 24px) !important;
        max-width: none !important;

        margin: 0 auto 18px !important;

        transform: none !important;
    }

    .platform-main-hero
    .innoplatform-side-link {
        min-height: 52px;

        padding: 6px 3px;

        font-size:
            clamp(0.52rem, 2.3vw, 0.64rem);
    }
}

/* =========================================================
   FIX — PLATFORM AT A GLANCE POSITION
   Keep this at the very end of platform.css
========================================================= */


.platform-hero-slide .platform-diagram-wrapper {
    position: relative;
    top: auto !important;

    width: 100%;
    
}

.platform-hero-slide .platform-diagram-wrapper svg {
    transform: none !important;
}


/* =========================================================
   HERO-TO-CONTENT SPACING — FINAL FIX
========================================================= */

/* The outer slide must touch the hero */
.platform-slider,
.platform-track,
.platform-slide {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* The inner content receives the breathing room */
.platform-slide > .platform-slide-inner {
    margin-top: 0 !important;
    padding-top: 50px !important;
    box-sizing: border-box;
}


/* =========================================================
   SOFT HERO-TO-CONTENT TRANSITION
   Replaces the hard line on .platform-slider
========================================================= */

.platform-main-hero {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.platform-slider {
    position: relative;


}


/* =========================================================
   LAPTOP — WIDER ARCHITECTURE CONTENT
   Narrower side menu + more room for five cards
========================================================= */

@media (min-width: 821px) and (max-width: 1399px) {

    :root {
        --platform-laptop-menu-left: 10px;
        --platform-laptop-menu-width: 142px;
        --platform-laptop-menu-gap: 18px;
        --platform-laptop-right-space: 16px;
    }


    .innoplatform-side-link {
        min-height: 38px;
        gap: 8px;
        padding: 8px 7px;
        font-size: 0.69rem;
    }

    .innoplatform-side-link svg {
        width: 22px;
        height: 22px;
        flex-basis: 16px;
    }

    /* Give the main content more available width */
    .platform-slide > .platform-slide-inner,
    .platform-slide-inner.architecture-content,
    .platform-slide-inner.platform-outcomes-content {
        width: auto !important;
        max-width: none !important;

        margin-left: calc(
            var(--platform-laptop-menu-left) +
            var(--platform-laptop-menu-width) +
            var(--platform-laptop-menu-gap)
        ) !important;

        margin-right: var(--platform-laptop-right-space) !important;
    }

    /* Ensure the architecture grid stays inside the content area */
    .architecture-journey {
        width: 100%;
        max-width: none;

        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .architecture-step {
        min-width: 0;
        width: 100%;
        padding-right: 10px;
        padding-left: 12px;
    }

    .architecture-step h3,
    .architecture-step p {
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   FINAL PLATFORM HERO
========================================================= */

@media (min-width: 821px) {

    .platform-main-hero {
        height: clamp(320px, 24vw, 380px) !important;
        min-height: 0 !important;
        overflow: hidden !important;

    
        border: 0 !important;
        box-shadow: none !important;
    }


    .platform-main-hero__content {
        left: clamp(185px, 18.5vw, 275px) !important;
        right: auto !important;

        top: 54px !important;
        bottom: auto !important;

        width: 560px !important;
        max-width: 560px !important;

        transform: none !important;
    }


    .platform-main-hero__accent {
        display: none !important;
    }


    .platform-main-hero__copy h1 {
        margin: 0 0 22px !important;

        color: #07192d !important;

        font-size: clamp(2.2rem, 3.1vw, 3.45rem) !important;
        font-weight: 800 !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;

        text-shadow: none !important;
    }


    .platform-main-hero__copy h1::after {
        content: none !important;
        display: none !important;
    }


    .platform-main-hero__copy p {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        color: #203750 !important;

        font-size: 1rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;

        text-shadow: none !important;
    }


    /* Transparent hero graphic */
    .platform-main-hero__shade {
        display: none !important;
    }

    .platform-main-hero__image img {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;

        width: 35% !important;
        height: auto !important;

        transform: translate(-110px, -50%) !important;

        opacity: 1 !important;
        filter: none !important;
    }


}


/* =========================================================
   SIDEBAR
========================================================= */


.innoplatform-side-link {
    width: calc(100% - 8px) !important;

    margin-left: 4px !important;
    margin-right: 4px !important;
}


/* =========================================================
   REMOVE HERO / CONTENT SEPARATORS
========================================================= */


.platform-slider::before {
    content: none !important;
    display: none !important;
}

.platform-slider {
    border-top: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.platform-main-hero {
    position: relative !important;

}


/* Soft blue waves along the bottom */
.platform-main-hero::before {


    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 125px !important;

    background:
        radial-gradient(
            ellipse 55% 95% at 18% 120%,
            rgba(125,190,255,.22) 0%,
            rgba(125,190,255,.10) 48%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 65% 100% at 62% 125%,
            rgba(103,174,255,.25) 0%,
            rgba(103,174,255,.11) 50%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 50% 90% at 96% 115%,
            rgba(105,165,255,.20) 0%,
            transparent 68%
        ) !important;


}

/* =========================================================
   FULL-HEIGHT FIXED SIDE NAVIGATION
========================================================= */


.platform-main-hero .innoplatform-side-link.is-current {


    border-radius: 10px !important;

    
}

/* =========================================================
   GLOBAL HEADER — ALWAYS ABOVE PAGE-SPECIFIC NAVIGATION
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
}


/* =========================================================
   HERO — SOFT PROFESSIONAL WAVES
========================================================= */


/* =========================================================
   LIGHT SIDE NAVIGATION
========================================================= */

.platform-main-hero .innoplatform-side-menu {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(247,250,255,.98) 100%
        ) !important;

    border-right: 1px solid rgba(32, 82, 145, .10) !important;

    box-shadow:
        8px 0 26px rgba(21, 58, 105, .07) !important;
}


/* Normal items */
.platform-main-hero .innoplatform-side-link {
    color: #102542 !important;
}


/* Active item */
.platform-main-hero .innoplatform-side-link.is-current {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #1267e8 0%,
            #257cf3 100%
        ) !important;

    border: 1px solid rgba(15, 103, 230, .35) !important;

    box-shadow:
        0 7px 18px rgba(24, 103, 220, .20) !important;
}


/* Clear professional wave strokes */
.platform-main-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;


    pointer-events: none !important;
    z-index: 1 !important;
}

.innoplatform-side-link:hover svg {
    stroke: #1672e8 !important;
    filter: none !important;
}

.innoplatform-side-link:hover {
    color: #1267d8 !important;
}

.innoplatform-side-link.is-current:hover svg {
    stroke: #ffffff !important;
}

.innoplatform-side-link.is-current:hover {
    color: #ffffff !important;
}


.platform-main-hero::before,
.platform-slider::before,
.platform-slider::after {
    content: none !important;
    display: none !important;
}
.platform-page {
    background: none !important;
    background-image: none !important;
}

.platform-main-hero {
    background-color: #f8fbff !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%237BA7E8' stroke-width='.55' stroke-opacity='.12'%3E%3Cpath d='M0 0H32M0 16H32M0 32H32M0 0V32M16 0V32M32 0V32'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.15' fill='%232F80ED' fill-opacity='.25'/%3E%3C/svg%3E") !important;

    background-repeat: repeat !important;
    background-size: 32px 32px !important;
}
.platform-main-hero .innoplatform-side-menu {
    background-color: #E3EEFA !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232F80ED' fill-opacity='.18'/%3E%3C/svg%3E") !important;

    background-repeat: repeat !important;
    background-size: 18px 18px !important;

}
.platform-slide-inner {
    border: 0 !important;
    outline: 0 !important;
    
}
/* Main content — remove legacy dark overlays */
.platform-slider,
.platform-slide,
.platform-slide-inner {
    background: transparent !important;
}

.platform-slide-inner {
    box-shadow: none !important;
}

.platform-slider {
    background:
        radial-gradient(
            circle at 72% 20%,
            rgba(70, 145, 255, .22),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(119, 74, 255, .15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #153f70 0%,
            #172f5d 46%,
            #1a2349 72%,
            #171d3c 100%
        ) !important;
}


/* =========================================================
   FOOTER — ABOVE PAGE-SPECIFIC FIXED ELEMENTS
========================================================= */

.site-footer {
    position: relative !important;
    z-index: 3500 !important;
  
}

.platform-diagram-wrapper {
    transform: none !important;
}

.platform-ecosystem-footer {
    margin-top: -30px !important;
}

/* MAIN HERO TITLE */
.platform-main-hero__copy h1 {
    color: #123B6D !important;
}


/* MAIN HERO DESCRIPTION */
.platform-main-hero__copy p {
    color: #243B5A !important;
    line-height: 1.55;
}

.security-expanded-item {
    border: 1px solid rgba(104, 168, 255, 0.48);

    background:
        linear-gradient(
            180deg,
            rgba(11, 24, 50, 0.98) 0%,
            rgba(7, 18, 37, 0.99) 100%
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        0 18px 40px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(135, 190, 255, 0.08);
}


.platform-section-title {
    position: relative;
    padding-left: 28px;
    

    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.platform-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 5px;
    height: 38px;

    background: #2F80ED;
    border-radius: 3px;
}
.platform-hero-slide .platform-diagram-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.platform-hero-slide .platform-slide-inner,
.platform-security-image-slide .platform-slide-inner {
    padding-top: 32px !important;
}

.platform-hero-slide .platform-section-title,
.platform-security-image-slide .platform-section-title {
    margin-top: 0 !important;
}

/* =========================================================
   ARCHITECTURE — ALIGN TOP WITH PLATFORM / SECURITY
========================================================= */

.platform-architecture-slide {
    padding-top: 0 !important;
}
.platform-hero-slide .platform-slide-inner,
.platform-security-image-slide .platform-slide-inner,
.platform-architecture-slide .platform-slide-inner {
    padding-top: 32px !important;
}

.platform-architecture-slide .connect-diagram-heading h3 {
    font-size: 1.8rem !important;
    line-height: 1.15;
}

.platform-architecture-slide .connect-diagram-number {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 1rem !important;
    border-radius: 8px;
}


/* Architecture journey — tighter spacing between cards */
.platform-architecture-slide .architecture-journey {
    gap: 5px !important;
}
.platform-architecture-slide .platform-principles-panel {
    background: rgba(8, 27, 57, 0.16);
    border: 1px solid rgba(110, 170, 230, 0.16);
    border-radius: 18px;
    padding: 28px 20px 26px;
}

.platform-principle-item:not(:last-child)::after {
    content: "";
    position: absolute;

    right: 0;
    top: 6%;
    bottom: 6%;

    width: 1px;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(79, 151, 235, 0.18) 15%,
        rgba(91, 166, 255, 0.48) 50%,
        rgba(79, 151, 235, 0.18) 85%,
        transparent 100%
    );

    box-shadow:
        0 0 8px rgba(47, 128, 237, 0.12);
}

.platform-principle-item:not(:last-child)::before {
    content: "";
    position: absolute;

    right: -2px;
    top: 50%;
    transform: translateY(-50%);

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #4A9BFF;

    box-shadow:
        0 0 7px rgba(74, 155, 255, 0.55);
}

/* =========================================================
   PLATFORM ECOSYSTEM FOOTER — STYLED SEPARATORS
========================================================= */

.platform-ecosystem-item {
    position: relative;
    border-right: none !important;
}

/* Gradient separator */
.platform-ecosystem-item:not(:last-child)::after {
    content: "";
    position: absolute;

    right: 0;
    top: 6%;
    bottom: 6%;

    width: 1px;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(79, 151, 235, 0.18) 15%,
        rgba(91, 166, 255, 0.48) 50%,
        rgba(79, 151, 235, 0.18) 85%,
        transparent 100%
    );

    box-shadow:
        0 0 8px rgba(47, 128, 237, 0.12);
}

/* Small illuminated node */
.platform-ecosystem-item:not(:last-child)::before {
    content: "";
    position: absolute;

    right: -2px;
    top: 50%;
    transform: translateY(-50%);

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #4A9BFF;

    box-shadow:
        0 0 7px rgba(74, 155, 255, 0.55);
}
.platform-ecosystem-item h3 {
    font-size: 1.05rem !important;
    line-height: 1.25;
    font-weight: 750;
}

.platform-ecosystem-item p {
    font-size: 0.90rem !important;
    line-height: 1.5;
}
.platform-ecosystem-footer h2 {
    font-size: 1.5rem !important;
    font-weight: 750;
    line-height: 1.25;
}

.platform-architecture-slide .connect-diagram-header p {
    position: relative;

    max-width: 1180px;

    margin: 0;
    padding: 18px 22px 18px 24px;

    color: rgba(255,255,255,.80);
    font-size: 1rem;
    line-height: 1.75;

    background: rgba(8, 27, 57, 0.16);

    border-left: 4px solid #2F80ED;
    border-radius: 0 12px 12px 0;
}
.platform-architecture-slide .connect-diagram-header + .connect-diagram {
    margin-top: -45px !important;
}


/* =========================================================
   ARCHITECTURE JOURNEY — FINAL CLEAN VERSION

   Structure:
   Glass icon
       ↓
   line + numbered node
       ↓
   title / description card
========================================================= */


/* =========================================================
   1. JOURNEY GRID
========================================================= */

.platform-architecture-slide .architecture-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;

    width: 100%;
    margin: 0 0 34px;

    gap: 12px;
}


/* =========================================================
   2. STEP — LAYOUT ONLY
   No card/background around icon + number
========================================================= */

.platform-architecture-slide .architecture-step {
    /* Default theme = cyan */
    --step-accent: #18F1FF;
    --step-accent-rgb: 24, 241, 255;
    --step-node: #117B91;

    --step-card-top: rgba(4, 50, 62, .92);
    --step-card-bottom: rgba(2, 13, 31, .98);

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;
    min-height: 0;

    padding: 0;

    color: #fff;

    background: transparent;
    border: 0;
    box-shadow: none;

    overflow: visible;
}


/* Disable any legacy pseudo-elements */
.platform-architecture-slide .architecture-step::before,
.platform-architecture-slide .architecture-step::after {
    display: none;
}


/* =========================================================
   3. GLASS ICON CIRCLE
========================================================= */

.platform-architecture-slide .architecture-step-visual {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 150px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    /* Asymmetric glass body */
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,.07) 22%,
            rgba(100,170,255,.035) 52%,
            rgba(4,25,55,.06) 100%
        );

    border: 1px solid rgba(170,210,255,.22);

    /* Brighter upper/left edge = curved glass */
    border-top-color: rgba(210,230,255,.30);
    border-left-color: rgba(180,215,255,.24);
    border-right-color: rgba(100,160,230,.12);
    border-bottom-color: rgba(70,130,210,.09);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.20),
        inset 0 -10px 24px rgba(25,90,170,.08),
        inset 10px 8px 28px rgba(110,180,255,.045),
        0 12px 32px rgba(0,0,0,.16),
        0 0 24px rgba(47,128,237,.06);

    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}


/* Main glass reflection */
.platform-architecture-slide .architecture-step-visual::before {
    content: "";

    position: absolute;
    top: 9px;
    left: 21px;

    width: 78px;
    height: 42px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.08) 38%,
            transparent 72%
        );

    transform: rotate(-18deg);
    filter: blur(1px);

    pointer-events: none;
}


/* Inner refractive rim */
.platform-architecture-slide .architecture-step-visual::after {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;

    border: 1px solid rgba(190,220,255,.07);

    box-shadow:
        inset 3px 3px 8px rgba(255,255,255,.055),
        inset -4px -5px 10px rgba(20,80,160,.06);

    pointer-events: none;
}


/* Image inside glass */
.platform-architecture-slide .architecture-step-visual img {
    position: relative;
    z-index: 3;

    display: block;

    width: 112px;
    height: 112px;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   4. PROCESS LINE + NUMBER
========================================================= */

.platform-architecture-slide .architecture-step-progress {
    position: relative;
    z-index: 3;

    width: calc(100% - 28px);
    height: 44px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Horizontal connector */
.platform-architecture-slide .architecture-step-line {
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(var(--step-accent-rgb), .28) 10%,
            rgba(var(--step-accent-rgb), .82) 50%,
            rgba(var(--step-accent-rgb), .28) 90%,
            transparent 100%
        );
}


/* Connector endpoint dots */
.platform-architecture-slide .architecture-step-progress::before,
.platform-architecture-slide .architecture-step-progress::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--step-accent);

    box-shadow:
        0 0 8px rgba(var(--step-accent-rgb), .55);
}

.platform-architecture-slide .architecture-step-progress::before {
    left: 0;
}

.platform-architecture-slide .architecture-step-progress::after {
    right: 0;
}


/* Numbered circular node */
.platform-architecture-slide .architecture-step-number {
    position: relative;
    z-index: 4;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid var(--step-accent);
    border-radius: 50%;

    background: var(--step-node);

    color: #fff;

    font-size: .95rem;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        0 0 0 4px rgba(var(--step-accent-rgb), .06),
        0 0 12px rgba(var(--step-accent-rgb), .16);
}


/* =========================================================
   5. TITLE + DESCRIPTION CARD
========================================================= */

.platform-architecture-slide .architecture-step-copy {
    position: relative;
    z-index: 2;

    flex: 1;

    width: 100%;

    padding: 24px 20px 28px;

    border:
        1px solid rgba(var(--step-accent-rgb), .38);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(var(--step-accent-rgb), .10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            var(--step-card-top),
            var(--step-card-bottom)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 28px rgba(0,0,0,.18);

    text-align: left;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.platform-architecture-slide .architecture-step-copy h3 {
    margin: 0 0 14px;

    color: #fff;

    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}


.platform-architecture-slide .architecture-step-copy p {
    width: 100%;
    max-width: none;

    margin: 0;

    color: rgba(255,255,255,.80);

    font-size: .90rem;
    font-weight: 400;
    line-height: 1.62;

    text-align: left;
}


/* =========================================================
   6. COLOR THEMES
   Only variables change between cards
========================================================= */


/* 01 — CYAN */
.platform-architecture-slide .step-cyan {
    --step-accent: #18F1FF;
    --step-accent-rgb: 24, 241, 255;
    --step-node: #117B91;

    --step-card-top: rgba(4, 50, 62, .92);
    --step-card-bottom: rgba(2, 13, 31, .98);
}


/* 02 — BLUE */
.platform-architecture-slide .step-secure-transfer {
    --step-accent: #1875E3;
    --step-accent-rgb: 24, 117, 227;
    --step-node: #155EA9;

    --step-card-top: rgba(7, 34, 74, .92);
    --step-card-bottom: rgba(2, 13, 31, .98);
}


/* 03 — PURPLE */
.platform-architecture-slide .step-expert-workspace {
    --step-accent: #AD65FF;
    --step-accent-rgb: 173, 101, 255;
    --step-node: #7443B6;

    --step-card-top: rgba(34, 16, 58, .92);
    --step-card-bottom: rgba(7, 10, 30, .98);
}


/* 04 — ORANGE */
.platform-architecture-slide .step-controlled-docs {
    --step-accent: #FF9130;
    --step-accent-rgb: 255, 145, 48;
    --step-node: #B85E10;

    --step-card-top: rgba(56, 30, 8, .92);
    --step-card-bottom: rgba(12, 10, 7, .98);
}


/* 05 — GREEN */
.platform-architecture-slide .step-audit-delivery {
    --step-accent: #36A328;
    --step-accent-rgb: 54, 163, 40;
    --step-node: #257B1B;

    --step-card-top: rgba(14, 48, 12, .92);
    --step-card-bottom: rgba(2, 13, 31, .98);
}


/* =========================================================
   7. ACTIVE / HOVER STATE
   JS continues adding .is-active to .architecture-step
========================================================= */

.platform-architecture-slide
.architecture-step.is-active
.architecture-step-copy {
    transform: translateY(-3px);

    border-color:
        rgba(var(--step-accent-rgb), .72);

    box-shadow:
        0 14px 32px rgba(0,0,0,.24),
        0 0 18px rgba(var(--step-accent-rgb), .07),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* =========================================================
   8. LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .platform-architecture-slide .architecture-journey {
        grid-template-columns:
            repeat(5, minmax(150px, 1fr));

        gap: 10px;
    }

    .platform-architecture-slide .architecture-step-visual {
        width: 132px;
        height: 132px;
    }

    .platform-architecture-slide .architecture-step-visual img {
        width: 100px;
        height: 100px;
    }

    .platform-architecture-slide .architecture-step-copy {
        padding: 20px 16px 24px;
    }

    .platform-architecture-slide .architecture-step-copy h3 {
        font-size: 1rem;
    }

    .platform-architecture-slide .architecture-step-copy p {
        font-size: .84rem;
        line-height: 1.55;
    }
}


/* =========================================================
   9. TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

    .platform-architecture-slide .architecture-journey {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .platform-architecture-slide .architecture-step-visual {
        width: 140px;
        height: 140px;
    }

    .platform-architecture-slide .architecture-step-visual img {
        width: 106px;
        height: 106px;
    }

    .platform-architecture-slide .architecture-step-progress {
        max-width: 520px;
    }

    .platform-architecture-slide .architecture-step-copy {
        width: 100%;
        max-width: 560px;

        margin: 0 auto;
    }
}

/* =========================================================
   ARCHITECTURE SECTION TITLE DIVIDER
========================================================= */

.platform-architecture-slide .connect-diagram-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.platform-architecture-slide .connect-diagram-heading::after {
    content: "";

    flex: 1 1 auto;
    height: 1px;

    /* closer to the title */
    margin-left: 4px;

    /* optical vertical alignment */
    align-self: center;
    transform: translateY(2px);

    background: linear-gradient(
        90deg,
        rgba(79, 151, 235, 0.48) 0%,
        rgba(79, 151, 235, 0.18) 55%,
        transparent 100%
    );
}
/* =========================================================
   SHARED PLATFORM SECTION TITLE
   Platform / Security / Impact
========================================================= */

.platform-section-title {
    display: flex;
    align-items: center;
    gap: 22px;

    width: 100%;
    margin: 0 0 36px;
}

.platform-section-title-bar {
    display: block;
    width: 7px;
    height: 62px;

    flex: 0 0 7px;

    background: #2f80ed;
    border-radius: 999px;
}

.platform-section-title h2 {
    margin: 0;

    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
}


/* =========================================================
   PLATFORM PAGE — FINAL TYPOGRAPHY OVERRIDE
   ========================================================= */


/* =========================================================
   MAIN HERO
   ========================================================= */

.platform-page .platform-main-hero__copy h1 {
    font-size: clamp(2.6rem, 3vw, 3.1rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
}

.platform-page .platform-main-hero__copy p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
}


/* =========================================================
   PRIMARY SLIDE HEADINGS
   ========================================================= */

.platform-page .platform-section-header h2 {
    font-size: clamp(2.25rem, 3vw, 3rem) !important;
    line-height: 1.08 !important;
}

.platform-page .platform-section-header p,
.platform-page .connect-diagram-header p,
.platform-page .architecture-diagram-summary p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
}


/* =========================================================
   SIDE NAVIGATION
   ========================================================= */

.platform-page .innoplatform-side-link {
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
}


/* =========================================================
   PLATFORM ECOSYSTEM
   ========================================================= */

.platform-page .platform-ecosystem-footer h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
}

.platform-page .platform-ecosystem-item h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

.platform-page .platform-ecosystem-item p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}


/* =========================================================
   SECURITY
   ========================================================= */

.platform-page .security-expanded-item h3,
.platform-page .security-expanded-copy h3 {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
}

.platform-page .security-expanded-item p,
.platform-page .security-expanded-copy p,
.platform-page .security-more-content p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

.platform-page .security-read-more {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}


/* =========================================================
   ARCHITECTURE
   ========================================================= */

/* Numbered section headings */
.platform-page .connect-diagram-heading h3 {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
}

.platform-page .connect-diagram-number,
.platform-page .platform-principles-number {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Architecture journey titles */
.platform-page .architecture-step h3 {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
}

/* Architecture journey descriptions */
.platform-page .architecture-step p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   PLATFORM PRINCIPLES
   ========================================================= */

.platform-page .platform-principles-header h2 {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
}

.platform-page .platform-principle-item h3 {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
}

.platform-page .platform-principle-item p {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
}


/* =========================================================
   WHY IT MATTERS
   ========================================================= */

.platform-page .platform-outcome-number,
.platform-page .platform-outcome-heading h3 {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
}

.platform-page .platform-outcome-copy p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   GENERIC PLATFORM CARDS
   ========================================================= */

.platform-page .platform-card h3,
.platform-page .platform-benefits h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
}

.platform-page .platform-card p,
.platform-page .platform-benefits p,
.platform-page .platform-final p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
}


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

@media (max-width: 640px) {

    .platform-page .platform-main-hero__copy h1,
    .platform-page .platform-ecosystem-banner__content h1 {
        font-size: clamp(2.1rem, 9vw, 2.6rem) !important;
        line-height: 1.08 !important;
    }

    .platform-page .platform-main-hero__copy p,
    .platform-page .platform-ecosystem-banner__content p,
    .platform-page .platform-section-header p {
        font-size: 1rem !important;
    }

    .platform-page .platform-section-header h2 {
        font-size: clamp(1.9rem, 8vw, 2.35rem) !important;
    }

    .platform-page .connect-diagram-heading h3 {
        font-size: 1.375rem !important;
    }

    .platform-page .architecture-step h3,
    .platform-page .platform-principle-item h3,
    .platform-page .platform-outcome-heading h3 {
        font-size: 1.0625rem !important;
    }

    .platform-page .architecture-step p,
    .platform-page .platform-principle-item p,
    .platform-page .platform-outcome-copy p,
    .platform-page .security-expanded-item p {
        font-size: 0.9375rem !important;
    }

    .platform-page .innoplatform-side-link {
        font-size: 0.6875rem !important;
        line-height: 1.15 !important;
    }
}


	    .platform-outcomes .platform-outcome-card {
        height: 270px !important;
    }
	
/* =========================================================
   PLATFORM SIDE RAIL + STICKY MENU
   ========================================================= */

@media (min-width: 821px) {

    /* Do not create a sticky-breaking scroll container */
    html,
    body {
        overflow-x: clip !important;
    }

    .platform-page {
        position: relative !important;
        overflow: visible !important;
    }


    /* Full-height background column */
    .platform-sidebar-rail {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 156px !important;
        height: auto !important;

        background-color: #E3EEFA !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232F80ED' fill-opacity='.18'/%3E%3C/svg%3E") !important;

        background-repeat: repeat !important;
        background-size: 18px 18px !important;

        border-right:
            1px solid rgba(32, 82, 145, .10) !important;

        box-shadow:
            8px 0 26px rgba(21, 58, 105, .07) !important;

        overflow: visible !important;
    }


    /* Only the menu itself sticks */
    .platform-sidebar-rail > .innoplatform-side-menu {
        position: sticky !important;

        top: 152px !important;

        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 156px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 14px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        transform: none !important;
    }


    .platform-sidebar-rail .innoplatform-side-link {
        color: #102542 !important;
    }

    .platform-sidebar-rail .innoplatform-side-link.is-current {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #1267e8 0%,
                #257cf3 100%
            ) !important;

        border:
            1px solid rgba(15, 103, 230, .35) !important;

        border-radius: 10px !important;

        box-shadow:
            0 7px 18px rgba(24, 103, 220, .20) !important;
    }
}


/* =========================================================
   PLATFORM SIDEBAR — VISUAL LAYER FIX
   ========================================================= */


    .platform-sidebar-rail {
        z-index: 100 !important;
        isolation: isolate !important;

        background-color: #E3EEFA !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232F80ED' fill-opacity='.18'/%3E%3C/svg%3E") !important;

        background-repeat: repeat !important;
        background-size: 18px 18px !important;

        border-right:
            1px solid rgba(32,82,145,.10) !important;

        box-shadow:
            8px 0 26px rgba(21,58,105,.07) !important;
    }

    .platform-sidebar-rail > .innoplatform-side-menu {
        z-index: 1 !important;
    }

/* =========================================================
   DEEP-LINK ARRIVAL HIGHLIGHT
   Immediate, visible blinking after landing
========================================================= */

/*
 * Default arrival glow.
 */
.architecture-step {
    --arrival-glow: 47, 170, 255;
}


/*
 * InnoExchange / Secure Transfer
 */
.architecture-step.step-secure-transfer {
    --arrival-glow: 32, 170, 255;
}


/*
 * InnoLab / Expert Workspace
 */
.architecture-step.step-expert-workspace {
    --arrival-glow: 178, 82, 255;
}


/*
 * Animate the destination step.
 *
 * No transform is used here, so the card does not move,
 * shift, jump, or affect the scrolling position.
 */
.architecture-step.is-arrival-highlight {
    position: relative;
    z-index: 5;

    animation:
        architectureArrivalBlink 1.45s ease-in-out;
}


/*
 * Main card blinking effect.
 */
.architecture-step.is-arrival-highlight
.architecture-step-copy {

    animation:
        architectureArrivalCardBlink 1.45s ease-in-out;
}


/*
 * Also illuminate the icon/visual above the card.
 */
.architecture-step.is-arrival-highlight
.architecture-step-visual {

    animation:
        architectureArrivalVisualBlink 1.45s ease-in-out;
}


/* =========================================================
   ENTIRE STEP
========================================================= */

@keyframes architectureArrivalBlink {

    0%,
    100% {
        filter: brightness(1);
    }

    15% {
        filter: brightness(1.35);
    }

    30% {
        filter: brightness(1);
    }

    48% {
        filter: brightness(1.30);
    }

    63% {
        filter: brightness(1);
    }

    80% {
        filter: brightness(1.22);
    }
}


/* =========================================================
   CARD
========================================================= */

@keyframes architectureArrivalCardBlink {

    0%,
    100% {
        box-shadow: none;
    }


    15% {
        box-shadow:
            0 0 0 3px rgba(
                var(--arrival-glow),
                0.95
            ),
            0 0 22px rgba(
                var(--arrival-glow),
                0.80
            ),
            0 0 48px rgba(
                var(--arrival-glow),
                0.50
            );
    }


    30% {
        box-shadow:
            0 0 0 1px rgba(
                var(--arrival-glow),
                0.10
            );
    }


    48% {
        box-shadow:
            0 0 0 3px rgba(
                var(--arrival-glow),
                0.90
            ),
            0 0 22px rgba(
                var(--arrival-glow),
                0.72
            ),
            0 0 44px rgba(
                var(--arrival-glow),
                0.42
            );
    }


    63% {
        box-shadow:
            0 0 0 1px rgba(
                var(--arrival-glow),
                0.10
            );
    }


    80% {
        box-shadow:
            0 0 0 2px rgba(
                var(--arrival-glow),
                0.72
            ),
            0 0 18px rgba(
                var(--arrival-glow),
                0.52
            ),
            0 0 35px rgba(
                var(--arrival-glow),
                0.30
            );
    }
}


/* =========================================================
   ICON / VISUAL
========================================================= */

@keyframes architectureArrivalVisualBlink {

    0%,
    100% {
        filter:
            brightness(1)
            drop-shadow(
                0 0 0 rgba(
                    var(--arrival-glow),
                    0
                )
            );
    }


    15%,
    48% {
        filter:
            brightness(1.28)
            drop-shadow(
                0 0 16px rgba(
                    var(--arrival-glow),
                    0.75
                )
            );
    }


    30%,
    63% {
        filter:
            brightness(1)
            drop-shadow(
                0 0 3px rgba(
                    var(--arrival-glow),
                    0.10
                )
            );
    }


    80% {
        filter:
            brightness(1.18)
            drop-shadow(
                0 0 11px rgba(
                    var(--arrival-glow),
                    0.50
                )
            );
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .architecture-step.is-arrival-highlight,
    .architecture-step.is-arrival-highlight
    .architecture-step-copy,
    .architecture-step.is-arrival-highlight
    .architecture-step-visual {

        animation: none;
    }
}

/* =========================================================
   SECURITY DEEP-LINK ARRIVAL HIGHLIGHT
========================================================= */

.security-expanded-item.is-arrival-highlight {
    position: relative;
    z-index: 5;

    animation:
        securityDeepLinkBlink 1.45s ease-in-out;
}


@keyframes securityDeepLinkBlink {

    0%,
    100% {
        filter: brightness(1);
    }

    15% {
        filter: brightness(1.24);

        box-shadow:
            0 0 0 3px rgba(38, 198, 255, 0.90),
            0 0 24px rgba(38, 198, 255, 0.64),
            0 0 46px rgba(38, 198, 255, 0.30);
    }

    30% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(38, 198, 255, 0.10);
    }

    48% {
        filter: brightness(1.20);

        box-shadow:
            0 0 0 3px rgba(38, 198, 255, 0.82),
            0 0 21px rgba(38, 198, 255, 0.54),
            0 0 40px rgba(38, 198, 255, 0.25);
    }

    63% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(38, 198, 255, 0.10);
    }

    80% {
        filter: brightness(1.15);

        box-shadow:
            0 0 0 2px rgba(38, 198, 255, 0.65),
            0 0 17px rgba(38, 198, 255, 0.40);
    }

}

/* =========================================================
   ARCHITECTURE CONNECTIONS DEEP-LINK HIGHLIGHT
========================================================= */

.connect-diagram-header.is-arrival-highlight {
    position: relative;
    z-index: 5;

    animation:
        connectionsDeepLinkBlink 1.45s ease-in-out;
}


@keyframes connectionsDeepLinkBlink {

    0%,
    100% {
        filter: brightness(1);
    }

    15% {
        filter: brightness(1.28);

        text-shadow:
            0 0 16px rgba(70, 170, 255, 0.75);
    }

    30% {
        filter: brightness(1);
        text-shadow: none;
    }

    48% {
        filter: brightness(1.22);

        text-shadow:
            0 0 13px rgba(70, 170, 255, 0.60);
    }

    63% {
        filter: brightness(1);
        text-shadow: none;
    }

    80% {
        filter: brightness(1.15);

        text-shadow:
            0 0 10px rgba(70, 170, 255, 0.40);
    }

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

    .security-expanded-item.is-arrival-highlight,
    .connect-diagram-header.is-arrival-highlight {
        animation: none;
    }

}


/* =========================================================
   PLATFORM HERO — PROFESSIONAL BOTTOM SEPARATOR
========================================================= */

.platform-main-hero__image {
    opacity: 0;
    transform: translateX(60px);

    animation:
        platformHeroImageEnter
        0.85s
        cubic-bezier(.22, .75, .25, 1)
        0.2s
        forwards;
}

@keyframes platformHeroImageEnter {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-main-hero__image {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   PLATFORM DIAGRAM — 3D GRAPHICS + ORIGINAL CONNECTION GEOMETRY
   Add this block at the VERY BOTTOM of platform.css.

   This version:
   - keeps the original connection topology
   - removes fixed endpoint circles completely
   - anchors lines directly to the 3D image geometry
   - preserves moving data particles
   - keeps text below each 3D image
========================================================= */


/* =========================================================
   OUTER DIAGRAM
========================================================= */

.connect-diagram.connect-diagram--3d{
    width:100%;
    max-width:1240px;
    margin:0 auto;
}

.connect-diagram.connect-diagram--3d svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
}


/* =========================================================
   3D IMAGE NODES
========================================================= */

.connect-diagram--3d .diagram-node-image{
    pointer-events:none;

    filter:
        drop-shadow(0 9px 13px rgba(0,0,0,.34))
        drop-shadow(0 0 9px rgba(65,145,255,.10));
}


/* =========================================================
   TEXT BELOW THE GRAPHICS
========================================================= */

.connect-diagram--3d .diagram-node-title,
.connect-diagram--3d .diagram-node-subtitle{
    font-family:"Segoe UI", Tahoma, Verdana, sans-serif;
    text-rendering:geometricPrecision;
    pointer-events:none;

    /*
       A very small dark stroke keeps white text readable over
       glowing image edges without making it look outlined.
    */
    paint-order:stroke;
    stroke:#061225;
    stroke-linejoin:round;
}

.connect-diagram--3d .diagram-node-title{
    fill:#ffffff;

    font-size:18px;
    font-weight:750;

    stroke-width:2.2px;
}

.connect-diagram--3d .diagram-node-title--compact{
    font-size:16px;
}

.connect-diagram--3d .diagram-node-title--delivery{
    font-size:16px;
}

.connect-diagram--3d .diagram-node-subtitle{
    fill:rgba(255,255,255,.90);

    font-size:14px;
    font-weight:500;

    stroke-width:1.8px;
}


/* =========================================================
   CONNECTIONS
========================================================= */

.connect-diagram--3d .diagram-flow-paths{
    pointer-events:none;
}

/*
   Keep the connection lines crisp at every responsive size.
   The stroke does not become thinner when the SVG scales.
*/
.connect-diagram--3d .flow-line{
    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

    vector-effect:non-scaling-stroke;

    opacity:.96;
}

/* Main left-to-right chain */
.connect-diagram--3d .flow-line-solid{
    stroke-dasharray:none;
}

/*
   Secondary / feedback paths use the same dotted rhythm as
   the original diagram, only slightly more visible beside
   the dimensional PNG artwork.
*/
.connect-diagram--3d .flow-line-dashed{
    stroke-dasharray:3 7;
    stroke-linecap:round;
}


/* =========================================================
   MOVING DATA PARTICLES
   NOTE:
   These are NOT fixed endpoint circles. They travel along
   the path exactly like the original diagram.
========================================================= */

.connect-diagram--3d .diagram-flow-dots,
.connect-diagram--3d .flow-dot{
    pointer-events:none;
}

.connect-diagram--3d .flow-dot{
    stroke:none;
}


/* =========================================================
   SVG LAYERS
========================================================= */

.connect-diagram--3d .diagram-block-layer,
.connect-diagram--3d .diagram-block-layer *{
    pointer-events:none;
}


/* =========================================================
   PLATFORM PAGE WRAPPER
   Keep the diagram centered when used in the ecosystem area.
========================================================= */

.platform-diagram-wrapper .connect-diagram.connect-diagram--3d{
    width:100%;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width:821px) and (max-width:1280px){

    .platform-diagram-wrapper .connect-diagram.connect-diagram--3d{
        width:100%;
        max-width:1000px;
    }

    .connect-diagram--3d .diagram-node-title{
        font-size:17px;
    }

    .connect-diagram--3d .diagram-node-title--compact,
    .connect-diagram--3d .diagram-node-title--delivery{
        font-size:15px;
    }

    .connect-diagram--3d .diagram-node-subtitle{
        font-size:13px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:820px){

    .platform-diagram-wrapper .connect-diagram.connect-diagram--3d{
        width:100%;
        max-width:100%;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .connect-diagram--3d animateMotion{
        display:none;
    }
}


.platform-hero-slide .platform-diagram-wrapper .connect-diagram {
    transform: translateY(-55px) !important;
}
/* ==========================================================
   PLATFORM PAGE — FINAL MOBILE OVERRIDE
   Keep this at the VERY BOTTOM of platform.css
   ========================================================== */

@media (max-width: 640px) {


    /* ======================================================
       1. MAIN PLATFORM HERO
       Keep original light Platform background
       Remove hero graphic only
       ====================================================== */

    .platform-main-hero {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;

        background-color: #f8fbff !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%237BA7E8' stroke-width='.55' stroke-opacity='.12'%3E%3Cpath d='M0 0H32M0 16H32M0 32H32M0 0V32M16 0V32M32 0V32'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.15' fill='%232F80ED' fill-opacity='.25'/%3E%3C/svg%3E") !important;

        background-repeat: repeat !important;
        background-size: 32px 32px !important;
    }


    /* Remove hero image */
    .platform-main-hero__image {
        display: none !important;

        opacity: 0 !important;
        animation: none !important;
        transform: none !important;
    }


    /* Remove hero image shading */
    .platform-main-hero__shade {
        display: none !important;
    }


    /* Remove any decorative hero overlay */
    .platform-main-hero::before,
    .platform-main-hero::after {
        content: none !important;
        display: none !important;
    }



    /* ======================================================
       2. HERO TEXT
       ====================================================== */

    .platform-main-hero__content {
        position: relative !important;

        inset: auto !important;

        order: 1;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 26px 20px 24px !important;

        background: transparent !important;

        gap: 10px !important;
    }


    .platform-main-hero__accent {
        display: none !important;
    }


    /* Main title — compact enough for mobile */
    .platform-page .platform-main-hero__copy h1 {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 10px !important;

        color: #123B6D !important;

        font-size: clamp(1.55rem, 6vw, 1.9rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;

        white-space: nowrap !important;

        text-shadow: none !important;
    }


    .platform-page .platform-main-hero__copy p {
        margin: 0 !important;

        color: #243B5A !important;

        font-size: .92rem !important;
        line-height: 1.6 !important;
    }



    /* ======================================================
       3. REMOVE DESKTOP SIDE RAIL
       ====================================================== */

    .platform-sidebar-rail {
        position: relative !important;

        inset: auto !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;
    }



    /* ======================================================
       4. MOBILE PLATFORM NAVIGATION
       Four compact horizontal buttons
       Push down so logo does not overlap it
       ====================================================== */

    .platform-sidebar-rail > .innoplatform-side-menu,
    .platform-main-hero .innoplatform-side-menu {

        position: relative !important;

        inset: auto !important;

        order: 2;

        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        width: calc(100% - 36px) !important;
        max-width: none !important;

        height: auto !important;

        /* Important — clears protruding logo */
        margin: 30px auto 18px !important;

        padding: 6px !important;

        gap: 3px !important;

        transform: none !important;

        border: 1px solid rgba(105,157,226,.28) !important;
        border-radius: 12px !important;

        background:
            linear-gradient(
                180deg,
                rgba(7,26,57,.97),
                rgba(4,16,38,.98)
            ) !important;

        box-shadow: none !important;
    }



    /* Individual navigation buttons */
    .platform-page .innoplatform-side-link {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 6px 2px !important;

        color: rgba(215,226,246,.78) !important;

        font-size: clamp(.56rem, 2.3vw, .68rem) !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;

        text-align: center !important;

        border-radius: 8px !important;

        transform: none !important;
    }


    /* Navigation icons */
    .platform-page .innoplatform-side-link svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }


    /* Keep Platform / Security / Architecture / Impact
       all on ONE line */
    .platform-page .innoplatform-side-link span {
        width: 100% !important;

        overflow: visible !important;

        text-align: center !important;

        white-space: nowrap !important;
        text-overflow: clip !important;
    }


    .platform-page .innoplatform-side-link:hover {
        transform: none !important;
    }


    /* Active navigation button */
    .platform-page .innoplatform-side-link.is-current {
        color: #ffffff !important;
    }


    /* Horizontal active indicator */
    .platform-page .innoplatform-side-link.is-current::before {
        content: "" !important;

        position: absolute !important;

        top: auto !important;
        right: 7px !important;
        bottom: -1px !important;
        left: 7px !important;

        width: auto !important;
        height: 3px !important;

        border-radius: 10px !important;

        background: #18f1ff !important;

        box-shadow:
            0 0 7px rgba(24,241,255,.95),
            0 0 15px rgba(24,241,255,.42) !important;
    }



    /* ======================================================
       5. ALL MOBILE SECTION TITLES
       Smaller + one line
       ====================================================== */

    .platform-page .platform-ecosystem-banner__content h1 {
        width: 100% !important;

        margin: 0 0 10px !important;

        font-size: clamp(1.45rem, 5.8vw, 1.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;

        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    .platform-page .platform-section-header h2 {
        width: 100% !important;

        font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -.025em !important;

        white-space: nowrap !important;
    }


    /* Architecture title */
    .platform-page
    .platform-architecture-slide
    .connect-diagram-heading h3 {

        margin: 0 !important;

        font-size: clamp(1.35rem, 5.2vw, 1.65rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.02em !important;

        white-space: nowrap !important;
    }


    .platform-page
    .platform-architecture-slide
    .connect-diagram-heading {

        gap: 10px !important;
        flex-wrap: nowrap !important;
    }



    /* ======================================================
       6. MOBILE BANNERS
       Keep images removed
       ====================================================== */

    .platform-page .platform-ecosystem-banner {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: flex-start !important;

        background: none !important;
        background-image: none !important;

        border-radius: 0 !important;
        overflow: visible !important;
    }


    .platform-page .platform-ecosystem-banner::before,
    .platform-page .platform-security-banner::before,
    .platform-page .platform-architecture-banner::before,
    .platform-page .platform-outcomes-banner::before,
    .platform-page .platform-ecosystem-banner::after {
        content: none !important;
        display: none !important;

        background: none !important;
        background-image: none !important;
    }


    .platform-page .platform-ecosystem-banner__content {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 22px 20px 20px !important;

        text-align: left !important;
    }



    /* ======================================================
       7. REMOVE OLD MOBILE BULLETS + SEPARATOR LINES
       ====================================================== */

    /* Ecosystem items */
    .platform-page
    .platform-ecosystem-item::before,
    .platform-page
    .platform-ecosystem-item::after,
    .platform-page
    .platform-ecosystem-item:not(:last-child)::before,
    .platform-page
    .platform-ecosystem-item:not(:last-child)::after {

        content: none !important;
        display: none !important;
    }


    .platform-page .platform-ecosystem-item {
        border: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Architecture principle items */
    .platform-page
    .platform-principle-item::before,
    .platform-page
    .platform-principle-item::after,
    .platform-page
    .platform-principle-item:not(:last-child)::before,
    .platform-page
    .platform-principle-item:not(:last-child)::after {

        content: none !important;
        display: none !important;
    }


    .platform-page .platform-principle-item {
        border: 0 !important;
    }



    /* ======================================================
       8. MAIN SLIDE WIDTH
       ====================================================== */

    .platform-page .platform-slider,
    .platform-page .platform-track,
    .platform-page .platform-slide {

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
/* ==========================================================
   PLATFORM MOBILE — FINAL TITLE + DESCRIPTION FIX
   ========================================================== */

    /* ------------------------------------------------------
       Architecture title — force ONE line
       ------------------------------------------------------ */

    .platform-page
    .platform-architecture-slide
    .connect-diagram-heading h3 {

        font-size: 1.05rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;

        white-space: nowrap !important;

        margin: 0 !important;
    }


    /* Other main Platform section titles */
    .platform-page .platform-section-title,
    .platform-page .platform-section-header h2 {

        font-size: 1.15rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;

        white-space: nowrap !important;
    }


    /* ------------------------------------------------------
       Remove text shadow from header descriptions
       ------------------------------------------------------ */

    .platform-page .platform-main-hero__copy p,
    .platform-page .platform-ecosystem-banner__content p,
    .platform-page .platform-section-header p,
    .platform-page .connect-diagram-header p {

        text-shadow: none !important;
        filter: none !important;
    }
  /* Move the Integrated Ecosystem Architecture title left */
    .platform-page
    .platform-hero-slide
    .connect-diagram-heading {
        margin-left: -28px !important;
        margin-bottom: 24px !important;
    }


    /* Keep title on one line */
    .platform-page
    .platform-hero-slide
    .connect-diagram-heading h3 {
        margin: 0 !important;

        font-size: 1.05rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* Stop old CSS from pulling diagram upward */
    .platform-page
    .platform-hero-slide
    .platform-diagram-wrapper
    .connect-diagram {
        transform: none !important;

        margin-top: 16px !important;
    }
	    .platform-page
    .platform-hero-slide
    .platform-diagram-wrapper {
        margin-bottom: 42px !important;
    }
 .platform-page
    .platform-security-image-slide
    .security-expanded-visual {
        display: none !important;
    }

    .platform-page
    .platform-security-image-slide
    .security-expanded-copy {
        margin-top: 0 !important;
        padding-top: 24px !important;
    }
	
	
	    .platform-page
    .platform-outcomes-slide
    .platform-outcome-visual {
        display: none !important;
    }
	
	    .platform-page
    .platform-outcomes-slide
    .platform-outcome-card {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .platform-page
    .platform-outcomes-slide
    .platform-outcome-copy {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 24px 20px !important;
    }
	/* Impact card titles — smaller on mobile */
.platform-page
.platform-outcomes-slide
.platform-outcome-copy h3 {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
}