/* ===== INFRAESTRUCTURA PAGE - NETWORKING, CCTV & FIBER OPTICS ===== */

/* ===== HERO SVG ILLUSTRATION ===== */
.infra-network-svg{
    width:100%;max-width:500px;height:auto;
    margin:0 auto;display:block;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,.2));
    animation:infraFloat 6s ease-in-out infinite;
}
@keyframes infraFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-14px)}
}

/* SVG node hover */
.infra-node{transition:transform .3s ease;cursor:default}
.infra-node:hover{transform:scale(1.12)}

/* Pulsing circles on nodes */
.infra-pulse{
    animation:infraPulse 3s ease-in-out infinite;
    transform-origin:center;
}
@keyframes infraPulse{
    0%{r:28;opacity:0.4}
    50%{r:36;opacity:0.1}
    100%{r:28;opacity:0.4}
}

/* Connection lines draw-in animation */
.infra-line{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    animation:infraDrawLine 2s ease-out forwards;
}
.infra-line-1{animation-delay:.2s}
.infra-line-2{animation-delay:.5s}
.infra-line-3{animation-delay:.5s}
.infra-line-4{animation-delay:.9s}
.infra-line-5{animation-delay:.9s}
.infra-line-6{animation-delay:.9s}
.infra-line-7{animation-delay:.9s}
.infra-line-8{animation-delay:1.3s}
@keyframes infraDrawLine{
    to{stroke-dashoffset:0}
}

/* Data packets glow */
.infra-packet{opacity:0;animation:infraPacketFade 3s ease-in-out infinite}
.infra-packet-1{animation-delay:.5s}
.infra-packet-2{animation-delay:1.2s}
.infra-packet-3{animation-delay:2s}
@keyframes infraPacketFade{
    0%,10%{opacity:0}
    15%,85%{opacity:1}
    95%,100%{opacity:0}
}

/* ===== SERVICES GRID ===== */
.infra-services-grid{
    max-width:1300px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}

/* Service Cards */
.infra-card{
    position:relative;
    border-radius:24px;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    transform-style:preserve-3d;
}
.infra-card:hover{transform:translateY(-10px)}

.infra-card-glow{
    position:absolute;inset:-1px;border-radius:24px;
    background:linear-gradient(135deg,rgba(0,51,160,.3),rgba(0,181,173,.3),rgba(124,58,237,.2));
    opacity:0;transition:opacity .5s;z-index:0;
    filter:blur(1px);
}
.infra-card:hover .infra-card-glow{opacity:1}

.infra-card-inner{
    position:relative;z-index:1;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:2rem 1.8rem;
    backdrop-filter:blur(10px);
    height:100%;
    transition:all .5s;
    display:flex;flex-direction:column;
}
.infra-card:hover .infra-card-inner{
    border-color:rgba(0,181,173,.25);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.infra-card-icon{
    width:64px;height:64px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;color:var(--accent-light);
    margin-bottom:1.2rem;
    transition:all .5s;
    position:relative;
}
.infra-card-icon::after{
    content:'';position:absolute;inset:0;border-radius:20px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    opacity:0;transition:opacity .5s;z-index:-1;
}
.infra-card:hover .infra-card-icon{
    color:#fff;transform:scale(1.1) rotate(-5deg);
}
.infra-card:hover .infra-card-icon::after{opacity:1}

.infra-card-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.15rem;font-weight:700;
    margin-bottom:.6rem;color:#fff;
}
.infra-card-desc{
    font-size:.85rem;color:var(--text-sec);
    line-height:1.6;margin-bottom:1rem;
}
.infra-card-list{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.infra-card-list li{
    display:flex;align-items:flex-start;gap:8px;
    font-size:.82rem;color:var(--text-sec);
    margin-bottom:.5rem;line-height:1.5;
}
.infra-card-list li i{
    color:var(--accent-light);font-size:.65rem;
    margin-top:5px;flex-shrink:0;
}

.infra-card-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 22px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;text-decoration:none;
    border-radius:50px;font-weight:600;font-size:.85rem;
    transition:all .4s;border:none;cursor:pointer;
    margin-top:auto;
}
.infra-card-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(37,211,102,.35);
}

/* ===== BRANDS SECTION ===== */
.infra-brands-section{overflow:hidden}

.infra-brands-track{
    width:100%;overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.infra-brands-slider{
    display:flex;gap:1.5rem;
    width:max-content;
    animation:infraBrandScroll 30s linear infinite;
}
.infra-brands-slider:hover{animation-play-state:paused}

@keyframes infraBrandScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(calc(-50% - .75rem))}
}

.infra-brand-card{
    flex-shrink:0;
    width:200px;
    padding:1.8rem 1.5rem;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:20px;
    text-align:center;
    transition:all .5s;
    backdrop-filter:blur(10px);
}
.infra-brand-card:hover{
    border-color:rgba(0,181,173,.3);
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.infra-brand-icon{
    width:56px;height:56px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:var(--accent-light);
    margin:0 auto 1rem;
    transition:all .4s;
}
.infra-brand-card:hover .infra-brand-icon{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;transform:scale(1.1);
}

.infra-brand-name{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.05rem;font-weight:700;
    color:#fff;margin-bottom:.3rem;
}
.infra-brand-tag{
    display:block;
    font-size:.75rem;color:var(--text-muted);
}

/* ===== WHY CHOOSE US ===== */
.infra-why-grid{
    max-width:1300px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}

.infra-why-card{
    position:relative;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:2.5rem 2rem;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}
.infra-why-card::before{
    content:'';position:absolute;top:0;left:0;
    width:100%;height:3px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0);transform-origin:left;
    transition:transform .5s;
}
.infra-why-card:hover::before{transform:scaleX(1)}
.infra-why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,181,173,.2);
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.infra-why-glow{
    position:absolute;inset:-1px;border-radius:24px;
    background:linear-gradient(135deg,rgba(0,51,160,.2),rgba(0,181,173,.15));
    opacity:0;transition:opacity .5s;z-index:0;filter:blur(1px);
}
.infra-why-card:hover .infra-why-glow{opacity:1}

.infra-why-icon{
    position:relative;z-index:1;
    width:56px;height:56px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:var(--accent-light);
    margin-bottom:1.2rem;
    transition:all .4s;
}
.infra-why-card:hover .infra-why-icon{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;transform:scale(1.1);
}

.infra-why-card h3{
    position:relative;z-index:1;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.15rem;font-weight:700;
    margin-bottom:.8rem;color:#fff;
}
.infra-why-card p{
    position:relative;z-index:1;
    font-size:.9rem;color:var(--text-sec);line-height:1.6;
}

/* ===== MID CTA SECTION ===== */
.infra-mid-cta-section{padding:40px 2rem}
.infra-mid-cta{
    max-width:1000px;margin:0 auto;
    padding:3.5rem 3rem;
    background:linear-gradient(145deg,rgba(0,51,160,.1),rgba(0,181,173,.06));
    border:1px solid rgba(0,181,173,.2);
    border-radius:28px;
    text-align:center;
    position:relative;overflow:hidden;
}
.infra-mid-cta::before{
    content:'';position:absolute;
    top:-60%;left:-30%;width:160%;height:160%;
    background:radial-gradient(circle at 30% 40%,rgba(0,51,160,.08),transparent 50%),
               radial-gradient(circle at 70% 60%,rgba(0,181,173,.06),transparent 50%);
    pointer-events:none;
}

.infra-mid-cta-content{position:relative;z-index:1}
.infra-mid-cta-content .section-title{margin-bottom:1rem}
.infra-mid-cta-content p{
    font-size:1.05rem;color:var(--text-sec);
    max-width:650px;margin:0 auto 2rem;line-height:1.7;
}

.infra-mid-cta-btns{
    display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .infra-services-grid{grid-template-columns:repeat(2,1fr)}
    .infra-why-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    .infra-services-grid{grid-template-columns:1fr}
    .infra-why-grid{grid-template-columns:1fr}
    .infra-network-svg{max-width:340px}
    .infra-brand-card{width:170px;padding:1.3rem 1rem}
    .infra-mid-cta{padding:2.5rem 1.5rem}
    .infra-mid-cta-btns{flex-direction:column;align-items:center}
}

@media(max-width:480px){
    .infra-network-svg{max-width:280px}
    .infra-brand-card{width:150px;padding:1.2rem .8rem}
    .infra-brand-name{font-size:.9rem}
}