/* =====================================================
VISAC USE CASES HUB
SECURITY INTELLIGENCE APPLICATIONS
===================================================== */


.usecases-page {

background:#ffffff;
color:#050505;

}



.usecases-container {

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

}




/* =====================================================
LABELS
===================================================== */


.usecases-label {

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

font-size:12px;
letter-spacing:.28em;
text-transform:uppercase;

color:#666;

margin-bottom:35px;

}



.usecases-label span {

width:8px;
height:8px;

background:#0f9f6e;

border-radius:50%;

}





/* =====================================================
BUTTONS
===================================================== */


.usecases-actions {

display:flex;
gap:20px;

margin-top:50px;

}



.usecases-button {

display:inline-flex;

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

padding:18px 38px;

font-size:13px;

letter-spacing:.16em;

text-transform:uppercase;

text-decoration:none;

}



.usecases-button.dark {

background:#050505;
color:white;

}



.usecases-button.light {

border:1px solid #ddd;

color:#050505;

}





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


.usecases-hero {

padding:150px 0 140px;

}



.usecases-hero h1 {

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

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

max-width:1050px;

margin-bottom:45px;

}



.usecases-hero p {

font-size:24px;

line-height:1.6;

color:#555;

max-width:850px;

}






/* =====================================================
INTRODUCTION
===================================================== */


.usecases-introduction {

padding:120px 0;

background:#050505;

color:white;

}



.intro-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

}



.intro-grid h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

}



.intro-grid p {

font-size:22px;

line-height:1.7;

color:#aaa;

}





/* =====================================================
SECTION TITLE
===================================================== */


.section-title {

margin-bottom:80px;

}



.section-title h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

}






/* =====================================================
USE CASE SECTIONS
===================================================== */


.usecases-grid-section {

padding:140px 0;

}



.usecases-grid-section.grey {

background:#f5f5f3;

}





/* =====================================================
CASE CARDS
===================================================== */


.cases-grid {

display:grid;

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

gap:30px;

}




.case-card {

display:block;

text-decoration:none;

color:#050505;

border:1px solid #e5e5e5;

padding:45px;

min-height:280px;

background:white;

transition:.25s ease;

}



.case-card:hover {

transform:translateY(-5px);

border-color:#050505;

}




.case-card h3 {

font-size:32px;

font-weight:500;

letter-spacing:-.04em;

margin-bottom:25px;

}



.case-card p {

font-size:17px;

line-height:1.7;

color:#666;

}






/* =====================================================
PLATFORM STACK
===================================================== */


.platform-stack {

padding:150px 0;

background:#050505;

color:white;

}



.platform-stack h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

margin-bottom:80px;

}



.platform-grid {

display:grid;

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

gap:30px;

}



.platform-grid > div {

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

padding:45px;

}



.platform-grid h3 {

font-size:14px;

letter-spacing:.2em;

color:#999;

}



.platform-grid strong {

display:block;

font-size:34px;

margin:30px 0;

font-weight:500;

}



.platform-grid p {

font-size:18px;

line-height:1.7;

color:#aaa;

}







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


.usecases-cta {

padding:160px 0;

text-align:center;

}



.usecases-cta h2 {

font-size:76px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

max-width:1000px;

margin:0 auto;

}



.usecases-cta p {

font-size:24px;

color:#555;

margin:40px 0 55px;

}




.text-center {

text-align:center;

}





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


@media(max-width:1100px){


.intro-grid {

grid-template-columns:1fr;

gap:50px;

}



.cases-grid {

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

}



.platform-grid {

grid-template-columns:1fr;

}



}




@media(max-width:700px){


.usecases-container {

width:92%;

}



.usecases-hero {

padding:90px 0;

}



.usecases-hero h1 {

font-size:48px;

}



.usecases-hero p {

font-size:18px;

}



.usecases-actions {

flex-direction:column;

}



.intro-grid h2,
.section-title h2,
.platform-stack h2 {

font-size:42px;

}



.cases-grid {

grid-template-columns:1fr;

}



.case-card {

padding:35px;

}



.platform-grid strong {

font-size:28px;

}



.usecases-cta h2 {

font-size:42px;

}


}