/* =====================================================
VISAC TRAVEL RISK MANAGEMENT
USE CASE PAGE v2.1
===================================================== */


.travel-risk-page {

background:#ffffff;
color:#050505;

}


.travel-risk-container {

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

}



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


.travel-risk-hero {

padding:120px 0 100px;

}



.travel-risk-grid {

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

}



.travel-risk-copy {

max-width:700px;

}



.travel-risk-label {

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

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

color:#666;

margin-bottom:35px;

}


.travel-risk-label span {

width:8px;
height:8px;

background:#0f9f6e;

border-radius:50%;

}



.travel-risk-hero h1 {

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

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

margin-bottom:40px;

}



.travel-risk-hero p {

font-size:22px;

line-height:1.65;

color:#555;

max-width:650px;

}



.travel-risk-actions {

display:flex;
gap:20px;

margin-top:45px;

}



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


.travel-risk-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;

}



.travel-risk-button.dark {

background:#050505;

color:white;

}



.travel-risk-button.light {

border:1px solid #ddd;

color:#050505;

}



/* =====================================================
INTELLIGENCE MAP
===================================================== */


.travel-risk-map {

height:520px;

background:#050505;

position:relative;

overflow:hidden;

border:1px solid #222;

box-shadow:
0 30px 80px rgba(0,0,0,.18);

}



.map-grid {

position:absolute;

inset:0;

background-image:

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

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

background-size:50px 50px;

}



.map-core {

position:absolute;

top:50%;

left:50%;

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

width:220px;

height:220px;

background:#ffffff;

color:#050505;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

text-align:center;

z-index:3;

}



.map-core span {

font-size:18px;

font-weight:700;

letter-spacing:.2em;

}



.map-core strong {

font-size:11px;

margin-top:18px;

letter-spacing:.15em;

}



.map-core small {

font-size:10px;

margin-top:12px;

color:#666;

letter-spacing:.15em;

}



.map-node {

position:absolute;

padding:12px 22px;

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

color:white;

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

font-size:11px;

letter-spacing:.25em;

z-index:2;

}



.node-one {

top:18%;

left:15%;

}


.node-two {

top:22%;

right:15%;

}


.node-three {

bottom:22%;

left:20%;

}


.node-four {

bottom:18%;

right:20%;

}



.travel-risk-map::after {

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at center,
rgba(15,159,110,.22),
transparent 45%
);

pointer-events:none;

}



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


.travel-risk-architecture {

padding:140px 0;

background:#050505;

color:white;

}



.architecture-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}



.travel-risk-label.light {

color:#aaa;

}



.architecture-copy h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

}



.architecture-copy p {

font-size:22px;

line-height:1.7;

color:#aaa;

}



.architecture-stack {

display:flex;

flex-direction:column;

gap:20px;

}



.architecture-layer {

display:flex;

gap:25px;

padding:30px;

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

}



.architecture-layer.active {

background:white;

color:#050505;

}



.architecture-layer h3 {

font-size:26px;

font-weight:500;

margin-bottom:10px;

}


.architecture-layer p {

color:#777;

line-height:1.6;

}

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


.travel-risk-capabilities {

padding:140px 0;

}



.section-title h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

}



.section-title p {

font-size:22px;

color:#555;

max-width:850px;

line-height:1.6;

}




.capabilities-grid {

display:grid;

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

gap:30px;

margin-top:70px;

}



.capability {

border:1px solid #e5e5e5;

padding:40px;

min-height:250px;

background:white;

transition:.25s ease;

}



.capability:hover {

border-color:#050505;

transform:translateY(-4px);

}



.capability h3 {

font-size:28px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:20px;

}



.capability p {

font-size:17px;

line-height:1.7;

color:#666;

}





/* =====================================================
WORKFLOW
===================================================== */


.travel-risk-workflow {

padding:120px 0;

background:#f5f5f3;

}



.travel-risk-workflow h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.workflow-flow {

display:flex;

align-items:center;

gap:20px;

}



.workflow-flow div {

flex:1;

background:white;

border:1px solid #ddd;

padding:35px;

text-align:center;

font-size:13px;

letter-spacing:.15em;

font-weight:500;

}



.workflow-flow span {

font-size:30px;

color:#555;

}





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


.travel-risk-stack {

padding:140px 0;

}



.travel-risk-stack h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

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:250px;

}



.stack-grid .active {

background:#050505;

color:white;

}



.stack-grid h3 {

font-size:28px;

font-weight:500;

}



.stack-grid strong {

display:block;

margin:25px 0;

font-size:13px;

letter-spacing:.15em;

text-transform:uppercase;

}





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


.travel-risk-usecases {

padding:140px 0;

background:#f5f5f3;

}



.usecases-grid {

display:grid;

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

gap:30px;

margin-top:70px;

}



.usecases-grid div {

background:white;

border:1px solid #ddd;

padding:40px;

}



.usecases-grid h3 {

font-size:28px;

font-weight:500;

}



.usecases-grid p {

color:#666;

line-height:1.7;

}





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


.travel-risk-cta {

padding:150px 0;

text-align:center;

}



.travel-risk-cta h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

}



.travel-risk-cta p {

font-size:22px;

color:#555;

margin:35px 0 50px;

}





/* =====================================================
FOOTER FIX
===================================================== */


.site-footer {

background:#050505;

color:white;

padding:80px 0 50px;

}



.site-footer .footer-grid {

display:grid;

grid-template-columns:
1.2fr 3fr;

gap:80px;

align-items:start;

}



.site-footer .footer-columns {

display:grid;

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

gap:40px;

}



.site-footer .footer-column {

display:flex;

flex-direction:column;

gap:18px;

}



.site-footer .footer-column h4 {

font-size:12px;

letter-spacing:.25em;

color:white;

margin-bottom:20px;

}



.site-footer .footer-column a {

color:#8d8d8d;

font-size:14px;

text-decoration:none;

transition:.2s;

}



.site-footer .footer-column a:hover {

color:white;

}



.footer-tagline {

color:#999;

max-width:300px;

line-height:1.6;

}



.footer-legal {

margin-top:35px;

color:#777;

font-size:13px;

}





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


@media(max-width:1200px){


.travel-risk-grid,
.architecture-grid {

grid-template-columns:1fr;

}


.capabilities-grid {

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

}


.stack-grid,
.usecases-grid {

grid-template-columns:1fr;

}


.site-footer .footer-grid {

grid-template-columns:1fr;

}


.site-footer .footer-columns {

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

}


}





@media(max-width:700px){


.travel-risk-container {

width:92%;

}



.travel-risk-hero {

padding:80px 0;

}



.travel-risk-hero h1 {

font-size:48px;

}



.travel-risk-hero p {

font-size:18px;

}



.travel-risk-actions {

flex-direction:column;

}



.travel-risk-map {

height:380px;

}



.architecture-copy h2,
.section-title h2,
.travel-risk-workflow h2,
.travel-risk-stack h2 {

font-size:42px;

}



.capabilities-grid {

grid-template-columns:1fr;

}



.workflow-flow {

flex-direction:column;

}



.workflow-flow span {

transform:rotate(90deg);

}



.travel-risk-cta {

padding:100px 0;

}



.travel-risk-cta h2 {

font-size:42px;

}



.site-footer .footer-columns {

grid-template-columns:1fr;

}


}