/* =====================================================
VISAC SECURMATCH PRODUCT PAGE
===================================================== */


.securmatch-page {

background:#ffffff;
color:#050505;

}


.securmatch-container {

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

}



/* =====================================================
PRODUCT BRAND
===================================================== */


.securmatch-product-brand {

margin-bottom:50px;

}


.securmatch-wordmark {

max-width:240px;
height:auto;

}







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


.securmatch-hero {

padding:120px 0 100px;

}



.securmatch-hero-grid {

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;

}



.securmatch-label {

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

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

color:#666;

margin-bottom:35px;

}



.securmatch-label span {

width:8px;
height:8px;

background:#0f9f6e;

border-radius:50%;

}



.securmatch-hero h1 {

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

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

margin-bottom:40px;

}



.securmatch-hero p {

font-size:22px;

line-height:1.65;

color:#555;

max-width:650px;

}



.securmatch-actions {

display:flex;

gap:20px;

margin-top:45px;

}



.securmatch-button {

display:inline-flex;

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

padding:18px 38px;

font-size:13px;

letter-spacing:.15em;

text-transform:uppercase;

text-decoration:none;

}



.securmatch-button.dark {

background:#050505;

color:white;

}


.securmatch-button.light {

border:1px solid #ddd;

color:#050505;

}







/* =====================================================
MAP VISUAL - GEO INTELLIGENCE ENGINE
===================================================== */


.securmatch-map {

height:520px;

background:#050505;

position:relative;

overflow:hidden;

border:1px solid #222;

}



.map-grid {

position:absolute;

inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.05) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.05) 1px,
transparent 1px
);


background-size:55px 55px;

}



.map-grid::after {

content:"";

position:absolute;

top:50%;
left:50%;

width:360px;
height:360px;

transform:translate(-50%,-50%);

border:1px dashed rgba(15,159,110,.7);

border-radius:50%;

}



.map-core {

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:190px;

height:190px;

display:flex;

align-items:center;

justify-content:center;

background:white;

color:#050505;

text-align:center;

font-size:13px;

letter-spacing:.18em;

line-height:1.6;

z-index:5;

}



.map-marker {

position:absolute;

padding:12px 22px;

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

background:rgba(0,0,0,.45);

color:white;

font-size:11px;

letter-spacing:.25em;

z-index:4;

}



.marker-one {

top:28%;

left:18%;

}



.marker-two {

top:30%;

right:15%;

}



.marker-three {

bottom:27%;

right:20%;

}



.marker-four {

bottom:20%;

left:18%;

}



.map-coordinate {

position:absolute;

top:25px;

left:25px;

color:white;

font-size:13px;

letter-spacing:.15em;

z-index:3;

}



.map-status {

margin-top:15px;

font-size:10px;

color:#0f9f6e;

}







/* =====================================================
CONTEXT
===================================================== */


.securmatch-context {

padding:130px 0;

background:#f5f5f3;

}



.context-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

}



.context-grid h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

}



.context-grid p {

font-size:22px;

line-height:1.7;

color:#555;

}







/* =====================================================
ENGINE
===================================================== */


.securmatch-engine {

padding:140px 0;

background:#050505;

color:white;

}



.engine-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

}



.securmatch-label.light {

color:#aaa;

}



.engine-copy h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

}



.engine-copy p {

font-size:22px;

line-height:1.7;

color:#aaa;

}



.engine-stack {

display:flex;

flex-direction:column;

gap:20px;

}



.engine-layer {

display:flex;

gap:25px;

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

padding:30px;

}



.engine-layer.active {

background:white;

color:#050505;

}



.engine-layer h3 {

font-size:28px;

font-weight:500;

margin-bottom:10px;

}



.engine-layer p {

line-height:1.6;

color:#777;

}

/* =====================================================
CAPABILITIES
===================================================== */


.securmatch-capabilities {

padding:140px 0;

}



.section-title h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

}



.section-title p {

font-size:22px;

color:#555;

max-width:850px;

}



.capabilities-grid {

display:grid;

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

gap:30px;

margin-top:70px;

}



.capability {

border:1px solid #e5e5e5;

padding:40px;

min-height:280px;

transition:.25s ease;

}



.capability:hover {

border-color:#000;

}



.capability h3 {

font-size:28px;

font-weight:500;

letter-spacing:-.03em;

}



.capability p {

font-size:17px;

line-height:1.7;

color:#666;

}







/* =====================================================
PIPELINE
===================================================== */


.securmatch-pipeline {

padding:120px 0;

background:#f5f5f3;

}



.securmatch-pipeline h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.pipeline-flow {

display:flex;

align-items:center;

gap:20px;

}



.pipeline-flow div {

background:white;

border:1px solid #ddd;

padding:35px;

flex:1;

text-align:center;

font-size:13px;

letter-spacing:.15em;

}



.pipeline-flow span {

font-size:30px;

}








/* =====================================================
OPERATIONAL GEO INTELLIGENCE LAYER
===================================================== */


.securmatch-intelligence-layer {

padding:140px 0;

}



.securmatch-intelligence-layer h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:35px;

}



.securmatch-intelligence-layer > .securmatch-container > p {

font-size:22px;

line-height:1.7;

color:#555;

max-width:900px;

margin-bottom:70px;

}



.intelligence-grid {

display:grid;

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

gap:30px;

}



.intelligence-grid div {

border:1px solid #e5e5e5;

padding:40px;

min-height:260px;

}



.intelligence-grid h3 {

font-size:30px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:20px;

}



.intelligence-grid p {

font-size:17px;

line-height:1.7;

color:#666;

}








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


.securmatch-stack {

padding:140px 0;

}



.securmatch-stack h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.stack-grid {

display:grid;

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

gap:30px;

}



.stack-grid > div {

border:1px solid #e5e5e5;

padding:45px;

min-height:300px;

}



.stack-grid .active {

background:#050505;

color:white;

}



.stack-grid h3 {

font-size:28px;

font-weight:500;

}



.stack-grid strong {

display:block;

margin:25px 0;

letter-spacing:.15em;

text-transform:uppercase;

font-size:12px;

}



.stack-grid p {

font-size:17px;

line-height:1.7;

color:#666;

}



.stack-grid .active p {

color:#aaa;

}








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


.securmatch-cta {

padding:150px 0;

text-align:center;

}



.securmatch-cta h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

}



.securmatch-cta p {

font-size:22px;

color:#555;

margin:35px 0 50px;

}









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


@media(max-width:1100px){


.securmatch-hero-grid,
.context-grid,
.engine-grid {

grid-template-columns:1fr;

}



.capabilities-grid {

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

}



.intelligence-grid {

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

}



.stack-grid {

grid-template-columns:1fr;

}



.pipeline-flow {

flex-wrap:wrap;

}


}





@media(max-width:700px){


.securmatch-container {

width:92%;

}



.securmatch-hero {

padding:80px 0;

}



.securmatch-hero h1 {

font-size:48px;

}



.securmatch-hero p {

font-size:18px;

}



.securmatch-actions {

flex-direction:column;

}



.securmatch-map {

height:380px;

}



.map-core {

width:150px;

height:150px;

font-size:11px;

}



.map-grid::after {

width:280px;

height:280px;

}



.context-grid h2,
.engine-copy h2,
.section-title h2,
.securmatch-pipeline h2,
.securmatch-intelligence-layer h2,
.securmatch-stack h2 {

font-size:42px;

}



.capabilities-grid,
.intelligence-grid {

grid-template-columns:1fr;

}



.pipeline-flow {

flex-direction:column;

}



.pipeline-flow span {

transform:rotate(90deg);

}



.stack-grid > div {

padding:30px;

}



.securmatch-cta h2 {

font-size:42px;

}


}