/* =====================================================
VISAC LOVHEN PRODUCT PAGE
===================================================== */


.lovhen-page {

background:#ffffff;
color:#050505;

}


.lovhen-container {

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

}



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


.lovhen-product-brand {

margin-bottom:50px;

}


.lovhen-wordmark {

max-width:240px;
height:auto;

}







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


.lovhen-hero {

padding:120px 0 100px;

}



.lovhen-hero-grid {

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

}



.lovhen-label {

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

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

color:#666;

margin-bottom:35px;

}



.lovhen-label span {

width:8px;
height:8px;

background:#0f9f6e;

border-radius:50%;

}



.lovhen-hero h1 {

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

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

margin-bottom:40px;

}



.lovhen-hero p {

font-size:22px;

line-height:1.65;

color:#555;

max-width:650px;

}



.lovhen-actions {

display:flex;

gap:20px;

margin-top:45px;

}



.lovhen-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;

}



.lovhen-button.dark {

background:#050505;

color:white;

}


.lovhen-button.light {

border:1px solid #ddd;

color:#050505;

}







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


.lovhen-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
===================================================== */


.lovhen-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
===================================================== */


.lovhen-engine {

padding:140px 0;

background:#050505;

color:white;

}



.engine-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

}



.lovhen-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
===================================================== */


.lovhen-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;

}







/* =====================================================
SATELLITE INTELLIGENCE
===================================================== */

.lovhen-satellite {
padding:140px 0;
background:#050505;
color:#fff;
}

.satellite-heading {
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:end;
margin-bottom:80px;
}

.satellite-heading .lovhen-label {
grid-column:1 / -1;
margin-bottom:0;
}

.satellite-heading h2 {
font-size:64px;
font-weight:500;
letter-spacing:-.05em;
line-height:1;
margin:0;
}

.satellite-heading > p {
font-size:20px;
line-height:1.7;
color:#aaa;
margin:0;
}

.satellite-use-cases,
.satellite-facts {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.satellite-use-cases article {
border:1px solid rgba(255,255,255,.2);
padding:38px;
min-height:310px;
}

.satellite-use-cases article > span,
.satellite-facts strong {
display:block;
font-size:11px;
letter-spacing:.18em;
color:#25c58a;
margin-bottom:38px;
}

.satellite-use-cases h3 {
font-size:28px;
font-weight:500;
line-height:1.15;
letter-spacing:-.03em;
}

.satellite-use-cases p,
.satellite-facts p,
.satellite-boundary p {
font-size:16px;
line-height:1.7;
color:#aaa;
}

.satellite-facts {
margin-top:24px;
}

.satellite-facts > div {
background:#111;
padding:34px;
}

.satellite-facts strong {
margin-bottom:18px;
}

.satellite-boundary {
margin-top:48px;
border-left:3px solid #25c58a;
background:#0b0b0b;
padding:38px 42px;
max-width:1100px;
}

.satellite-boundary h3 {
font-size:25px;
font-weight:500;
margin:0 0 18px;
}


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


.lovhen-pipeline {

padding:120px 0;

background:#f5f5f3;

}



.lovhen-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
===================================================== */


.lovhen-intelligence-layer {

padding:140px 0;

}



.lovhen-intelligence-layer h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:35px;

}



.lovhen-intelligence-layer > .lovhen-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
===================================================== */


.lovhen-stack {

padding:140px 0;

}



.lovhen-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
===================================================== */


.lovhen-cta {

padding:150px 0;

text-align:center;

}



.lovhen-cta h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

}



.lovhen-cta p {

font-size:22px;

color:#555;

margin:35px 0 50px;

}









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


@media(max-width:1100px){


.lovhen-hero-grid,
.context-grid,
.engine-grid,
.satellite-heading {

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;

}

.satellite-use-cases,
.satellite-facts {
grid-template-columns:1fr;
}


}





@media(max-width:700px){


.lovhen-container {

width:92%;

}



.lovhen-hero {

padding:80px 0;

}



.lovhen-hero h1 {

font-size:48px;

}



.lovhen-hero p {

font-size:18px;

}



.lovhen-actions {

flex-direction:column;

}



.lovhen-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,
.lovhen-pipeline h2,
.lovhen-intelligence-layer h2,
.lovhen-stack h2 {

font-size:42px;

}

.satellite-heading h2 {
font-size:42px;
}

.satellite-use-cases article {
min-height:0;
padding:30px;
}

.satellite-boundary {
padding:30px;
}



.capabilities-grid,
.intelligence-grid {

grid-template-columns:1fr;

}



.pipeline-flow {

flex-direction:column;

}



.pipeline-flow span {

transform:rotate(90deg);

}



.stack-grid > div {

padding:30px;

}



.lovhen-cta h2 {

font-size:42px;

}


}