/* =====================================================
   VISAC OPERATIONAL INTELLIGENCE
   Technology Platform Page
===================================================== */


/* =====================================================
   FOUNDATION
===================================================== */


.operational-page {

    background:#ffffff;
    color:#050505;

}


.operational-container {

    width:min(1400px,90%);
    margin:0 auto;

}





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


.operational-hero {

    padding:140px 0 120px;

}



.operational-label {

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

    font-family:var(--font-mono);

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#666;

    margin-bottom:35px;

}


.operational-label span {

    width:7px;
    height:7px;

    background:#0f9f6e;

    border-radius:50%;

}



.operational-hero h1 {

    max-width:1200px;

    font-size:clamp(58px,7vw,110px);

    font-weight:500;

    line-height:.95;

    letter-spacing:-5px;

    margin-bottom:45px;

}



.operational-hero p {

    max-width:950px;

    font-size:22px;

    line-height:1.6;

    color:#555;

}




.operational-actions {

    margin-top:50px;

}





/* =====================================================
   CHALLENGE
===================================================== */


.operational-challenge {

    padding:120px 0;

    border-top:1px solid #e5e5e5;

}



.operational-challenge h2 {

    max-width:1000px;

    font-size:64px;

    line-height:1;

    letter-spacing:-3px;

    font-weight:500;

    margin-bottom:40px;

}



.operational-challenge p {

    max-width:900px;

    font-size:21px;

    line-height:1.7;

    color:#555;

}





/* =====================================================
   ARCHITECTURE
===================================================== */


.operational-architecture {

    padding:140px 0;

    background:#050505;

    color:white;

}



.operational-architecture h2 {

    font-size:64px;

    letter-spacing:-3px;

    font-weight:500;

    margin-bottom:80px;

}



.architecture-flow {

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr;

    align-items:center;

    gap:25px;

}



.architecture-flow > div {

    min-height:240px;

    padding:40px;

    border:1px solid rgba(255,255,255,.25);

    background:#0b0b0b;

    font-family:var(--font-mono);

    font-size:13px;

    line-height:2;

    letter-spacing:.1em;

}



.architecture-flow .active {

    background:white;

    color:#050505;

}



.architecture-flow span {

    font-size:35px;

    color:#888;

}






/* =====================================================
   FOUNDATIONS
===================================================== */


.operational-foundations {

    padding:140px 0;

}



.operational-foundations h2 {

    font-size:64px;

    letter-spacing:-3px;

    font-weight:500;

    margin-bottom:80px;

}



.foundation-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.foundation-grid > div {


    border:1px solid #e5e5e5;

    padding:40px;

    min-height:320px;

    display:flex;

    flex-direction:column;

}



.foundation-grid h3 {

    font-family:var(--font-mono);

    font-size:13px;

    color:#0f9f6e;

    margin-bottom:30px;

}



.foundation-grid strong {

    font-size:28px;

    letter-spacing:-1px;

    margin-bottom:20px;

}



.foundation-grid p {

    color:#555;

    line-height:1.6;

    font-size:17px;

}





/* =====================================================
   VISAC STACK
===================================================== */


.operational-stack {

    padding:140px 0;

    background:#f5f5f3;

}



.operational-stack h2 {

    font-size:64px;

    letter-spacing:-3px;

    font-weight:500;

    margin-bottom:80px;

}



.stack-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}



.stack-grid > div {

    background:white;

    border:1px solid #e5e5e5;

    padding:45px;

    min-height:350px;

    display:flex;

    flex-direction:column;

}



.stack-grid h3 {

    font-size:42px;

    font-weight:500;

    letter-spacing:-2px;

    margin-bottom:15px;

}



.stack-grid strong {

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:35px;

}



.stack-grid p {

    color:#555;

    line-height:1.6;

    flex-grow:1;

}



.stack-grid a {

    margin-top:35px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#050505;

}





/* =====================================================
   CTA
===================================================== */


.operational-cta {

    padding:160px 0;

    text-align:center;

}



.operational-cta h2 {

    font-size:72px;

    letter-spacing:-4px;

    font-weight:500;

}



.operational-cta p {

    font-size:22px;

    color:#555;

    margin:35px 0 50px;

}





/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1100px){


.architecture-flow {

    grid-template-columns:1fr;

}



.architecture-flow span {

    transform:rotate(90deg);

}


.foundation-grid {

    grid-template-columns:repeat(2,1fr);

}


.stack-grid {

    grid-template-columns:1fr;

}


}



@media(max-width:700px){


.operational-container {

    width:calc(100% - 40px);

}


.operational-hero {

    padding:90px 0;

}



.operational-hero h1 {

    font-size:50px;

    letter-spacing:-2px;

}



.operational-challenge h2,
.operational-architecture h2,
.operational-foundations h2,
.operational-stack h2 {

    font-size:42px;

}



.foundation-grid {

    grid-template-columns:1fr;

}



.architecture-flow > div {

    min-height:auto;

    padding:30px;

}



.operational-cta h2 {

    font-size:42px;

}


}