/* Sections General */
section {padding: clamp(30px, calc( (70 / 1920) * 100vw ), 70px) 0;}
.sub-title { color: #aaa; text-transform: uppercase; font-size: 12px; letter-spacing: 3px; margin-bottom: 16px; }
.main-title {font-size: clamp(24px, 1.9vw, 36px);font-weight: 700;margin-bottom: 24px;letter-spacing: -1px;}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}
/* Capabilities */
.cap-section {/* background: var(--bg); */background: #F8F9FA;}

.cap-section .link:focus,
.cap-section .link:hover {
  color: #014099;
  text-decoration-color: #014099;
  text-decoration: none;
  text-decoration-thickness: 1px
}
.section-center-header { text-align: center; margin-bottom: 60px; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.cap-card h3{
    font-size: clamp(18px, 1.15vw, 22px);
    color: #000;
}
.cap-card p{
    margin-top: 15px;
    font-size: clamp(14px, 0.85vw, 16px);
}
.cap-card { padding: 40px; border-radius: 12px; display: flex; flex-direction: column; }
.cap-card.white { background: var(--white); border: 1px solid var(--border); }
.cap-card.black {background: #014099;color: var(--white);}
.cap-card.black h3{color:#fff;}
.radar-container {/* height: 250px; */margin: 40px 0;aspect-ratio: 1/1;}
.radar-container img{
    width: 100%;
    height: auto;
}
canvas { width: 100% !important; height: 100% !important; }

.hotspot-image {position: relative;aspect-ratio: 1/1;overflow: hidden;border-radius: 8px;margin: 40px 0;}
.hotspot-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.hotspot {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--black);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.hotspot::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--white);
    padding: 8px 12px;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s;
}

.hotspot:hover::after { opacity: 1; }

.list-items { margin: 40px 0; display: flex; flex-direction: column; gap: 16px; }
.list-item {display: flex;align-items: center;gap: 16px;background: rgb(0 0 0 / 15%);padding: 16px;border-radius: 8px;}
.l-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.l-icon.green {background: rgb(255 255 255);color: #0f0;}
.l-icon.blue {background: rgb(255 255 255);color: #06f;}
.l-icon img{width:27px;}
.link {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    border-bottom: 2px solid var(--black);
    align-self: flex-start;
    padding-bottom: 2px;
}
.link.light { color: var(--white); border-color: var(--white); }


@media(max-width:991px){
.cap-grid{grid-template-columns: repeat(2, 1fr); gap: 30px;}
.cap-card {padding: 20px;}
.section-center-header {margin-bottom: 30px;}    
}

@media(max-width:767px){
.cap-grid{grid-template-columns: repeat(1, 1fr);}
}