/* =====================================================
VISAC CRITICAL INFRASTRUCTURE PAGE
===================================================== */


.critical-page {

background:#ffffff;
color:#050505;

}



.critical-container {

width:min(1400px,90%);

margin:0 auto;

}






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


.critical-hero {

padding:130px 0 120px;

}



.critical-label {

display:flex;

align-items:center;

gap:12px;

font-size:12px;

letter-spacing:.28em;

text-transform:uppercase;

color:#666;

margin-bottom:35px;

}



.critical-label span {

width:8px;

height:8px;

background:#0f9f6e;

border-radius:50%;

}



.critical-hero h1 {

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

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

max-width:1200px;

margin:0 0 45px;

}



.critical-hero p {

font-size:22px;

line-height:1.65;

color:#555;

max-width:950px;

}







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


.critical-challenge {

padding:120px 0;

background:#f5f5f3;

}



.critical-challenge h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

max-width:1000px;

margin-bottom:40px;

}



.critical-challenge p {

font-size:22px;

line-height:1.7;

color:#555;

max-width:900px;

}








/* =====================================================
LANDSCAPE
===================================================== */


.critical-landscape {

padding:140px 0;

}



.critical-landscape h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.landscape-grid {

display:grid;

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

gap:30px;

}



.landscape-grid div {

border:1px solid #e5e5e5;

padding:45px;

min-height:300px;

transition:.25s ease;

}



.landscape-grid div:hover {

border-color:#000;

transform:translateY(-4px);

}



.landscape-grid h3 {

font-size:32px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:25px;

}



.landscape-grid p {

font-size:17px;

line-height:1.7;

color:#666;

}







/* =====================================================
VISAC APPROACH
===================================================== */


.critical-approach {

padding:140px 0;

background:#050505;

color:white;

}



.critical-approach h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

max-width:900px;

margin-bottom:35px;

}



.critical-approach > .critical-container > p {

font-size:22px;

line-height:1.6;

color:#aaa;

max-width:900px;

margin-bottom:70px;

}



.approach-grid {

display:grid;

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

gap:30px;

}



.approach-grid div {

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

padding:45px;

min-height:300px;

}



.approach-grid span {

font-size:12px;

letter-spacing:.2em;

color:#0f9f6e;

}



.approach-grid h3 {

font-size:38px;

font-weight:500;

letter-spacing:-.04em;

margin:30px 0 20px;

}



.approach-grid p {

font-size:17px;

line-height:1.7;

color:#aaa;

}







/* =====================================================
PLATFORM ECOSYSTEM
===================================================== */


.critical-platforms {

padding:140px 0;

}



.critical-platforms h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.platform-grid {

display:grid;

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

gap:30px;

}



.platform-grid div {

border:1px solid #e5e5e5;

padding:45px;

min-height:370px;

transition:.25s ease;

}



.platform-grid div:hover {

border-color:#000;

}



.platform-grid h3 {

font-size:42px;

font-weight:500;

letter-spacing:-.04em;

margin-bottom:15px;

}



.platform-grid strong {

display:block;

font-size:12px;

letter-spacing:.2em;

text-transform:uppercase;

margin-bottom:30px;

}



.platform-grid p {

font-size:17px;

line-height:1.7;

color:#555;

}



.platform-grid a {

display:inline-block;

margin-top:35px;

font-size:13px;

letter-spacing:.15em;

text-transform:uppercase;

color:#050505;

}



/* =====================================================
DOMAINS
===================================================== */


.critical-domains {

padding:140px 0;

}



.critical-domains h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.domains-grid {

display:grid;

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

gap:25px;

}



.domains-grid div {

border:1px solid #e5e5e5;

padding:35px;

min-height:240px;

transition:.25s ease;

}



.domains-grid div:hover {

border-color:#000;

transform:translateY(-4px);

}



.domains-grid h3 {

font-size:24px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:20px;

}



.domains-grid p {

font-size:16px;

line-height:1.7;

color:#666;

}



/* =====================================================
USE CASES
===================================================== */


.critical-usecases {

padding:140px 0;

background:#f5f5f3;

}



.critical-usecases h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.usecase-grid {

display:grid;

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

gap:25px;

}



.usecase-grid div {

background:white;

border:1px solid #ddd;

padding:35px;

min-height:230px;

}

.usecase-grid div {

transition:.25s ease;

}


.usecase-grid div:hover {

border-color:#000;
transform:translateY(-4px);

}

.usecase-grid h3 {

font-size:26px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:20px;

}



.usecase-grid p {

font-size:16px;

line-height:1.7;

color:#666;

}







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


.critical-cta {

padding:150px 0;

text-align:center;

}


.critical-cta .btn {

padding:20px 45px;

letter-spacing:.18em;

text-transform:uppercase;

font-size:12px;

}

.critical-cta h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

max-width:1100px;

margin:0 auto;

}



.critical-cta p {

font-size:22px;

color:#555;

max-width:850px;

margin:35px auto 50px;

}







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


@media(max-width:1100px){


.landscape-grid,
.platform-grid {

grid-template-columns:1fr;

}



.approach-grid {

grid-template-columns:1fr;

}



.usecase-grid {

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

}


}





@media(max-width:700px){


.critical-container {

width:92%;

}



.critical-hero {

padding:80px 0;

}



.critical-hero h1 {

font-size:48px;

letter-spacing:-.04em;

}



.critical-hero p {

font-size:18px;

}



.critical-challenge,
.critical-landscape,
.critical-approach,
.critical-platforms,
.critical-usecases,
.critical-cta {

padding:90px 0;

}



.critical-challenge h2,
.critical-landscape h2,
.critical-approach h2,
.critical-platforms h2,
.critical-usecases h2 {

font-size:42px;

}



.landscape-grid,
.platform-grid,
.approach-grid,
.usecase-grid {

grid-template-columns:1fr;

}



.landscape-grid div,
.platform-grid div,
.approach-grid div,
.usecase-grid div {

padding:30px;

}



.critical-cta h2 {

font-size:42px;

}


@media(max-width:1100px){

.domains-grid{

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

}

}


@media(max-width:700px){

.critical-domains h2{

font-size:42px;

}


.domains-grid{

grid-template-columns:1fr;

}

}
}