@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --ink: #111827;
    --ink-2: #0b1220;
    --blue: #2563EB;
    --blue-dark: #1d4ed8;
    --blue-light: #60a5fa;
    --gray: #6B7280;
    --bg: #F5F6F8;
    --white: #ffffff;
    --line: rgba(17,24,39,0.08);
    --radius: 16px;
    --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.35);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
h1,h2,h3{ font-weight: 800; line-height: 1.18; color: var(--ink); letter-spacing: -0.3px; }

.container{ width:100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.kicker{
    display:inline-block;
    font-size: 13px!important;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 14px;
}

.button{
    display:inline-flex; align-items:center; gap:8px;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 600; font-size: 15px;
    border: none; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button-blue{ background: var(--blue); color:#fff; box-shadow: 0 10px 24px rgba(37,99,235,0.32); }
.button-blue:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,0.42); }
.button-white{ background:#fff; color: var(--blue-dark); }
.button-white:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11,18,32,0.2); }

.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color: var(--ink); border-bottom: 1.5px solid transparent; padding-bottom:2px; transition: gap .2s ease, border-color .2s ease, color .2s ease; }
.text-link:hover{ gap:12px; border-color: currentColor; }
.text-link span{ transition: transform .2s ease; }

/* ===================== BRAND ===================== */
.brand{ display:flex; align-items:center; gap: 10px; font-family:'Inter',sans-serif; font-weight:700; font-size:19px; color:#fff; }
.brand-mark{ width:26px; height:26px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; flex-shrink:0; }
.brand-mark b{ display:block; border-radius:4px; background:#fff; }
.brand-mark b:first-child{ background: var(--blue); }
.brand em{ font-style:normal; color: var(--blue-light); }
.nav.scrolled .brand{ color: var(--ink); }
.footer .brand-mark b{ background: #fff; }
.footer .brand-mark b:first-child{ background: var(--blue); }
.nav.scrolled .brand-mark b{ background: var(--ink); }
.nav.scrolled .brand-mark b:first-child{ background: var(--blue); }
.nav.scrolled .brand em{ color: var(--blue); }

/* ===================== NAV ===================== */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:1000; padding:20px 0; transition: all .3s ease; background: rgba(11,18,32,0); }
.nav.scrolled{ background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(17,24,39,0.08); padding:13px 0; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:10px 16px; font-size:14.5px!important; font-weight:600; color:#fff; border-radius:999px; transition: all .2s ease; }
.nav.scrolled .nav-links a{ color: var(--ink); }
.nav-links a:hover{ background: rgba(255,255,255,0.15); }
.nav.scrolled .nav-links a:hover{ background: rgba(17,24,39,0.06); }
.nav-links a.nav-contact{ background: var(--blue); color:#fff!important; }
.nav-links a.nav-contact:hover{ background: var(--blue-dark); }
.nav-links a.nav-rdo{ border: 1.5px solid rgba(255,255,255,0.45); }
.nav.scrolled .nav-links a.nav-rdo{ border-color: rgba(17,24,39,0.22); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:6px 0; border-radius:2px; }
.nav.scrolled .nav-toggle span{ background: var(--ink); }

/* ===================== HERO ===================== */
.hero{
    position:relative; min-height: 94vh; display:flex; flex-direction:column; align-items:stretch;
    background: radial-gradient(circle at 80% 20%, rgba(37,99,235,0.16), transparent 55%), linear-gradient(160deg, var(--ink-2), var(--ink) 72%);
    color:#fff; overflow:hidden; padding: 150px 0 0;
}
.hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; padding-bottom: 64px; }
.hero-grid > *{ min-width:0; }
.hero-copy h1{ font-size: 48px; color:#fff; margin-bottom: 22px; }
.hero-copy h1 strong{ color: var(--blue-light); font-weight:800; }
.hero-copy > p{ font-size: 18px!important; color: rgba(255,255,255,0.72); max-width: 460px; margin-bottom: 36px; }
.hero-actions{ display:flex; align-items:center; gap: 28px; flex-wrap: wrap; }
.hero .text-link{ color: rgba(255,255,255,0.85); }

.hero-system{ position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.08); }
.hero-system img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter: brightness(1.42) contrast(.88) saturate(.88);
}
.hero-system-photo img{ filter: brightness(1.03) contrast(.98) saturate(.96); }
.hero-label{
    position:absolute; display:flex; align-items:center; gap:8px;
    padding: 8px 14px 8px 10px; border-radius:999px;
    background: rgba(11,18,32,0.72); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 12.5px!important; font-weight:600; color:#fff; letter-spacing:.2px;
    white-space: nowrap;
}
.hero-label::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--blue-light); box-shadow: 0 0 0 4px rgba(96,165,250,0.22); }
.label-fiber{ left: 4%; top: 68%; }
.label-network{ left: 54%; top: 26%; }
.label-security{ right: 5%; top: 12%; }
.label-monitor{ left: 42%; top: 84%; }

.hero-bottom{ display:flex; align-items:center; gap:16px; padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.hero-bottom span{ font-size: 13.5px!important; color: rgba(255,255,255,0.55); font-weight:500; }
.hero-bottom span:first-child{ color: rgba(255,255,255,0.85); font-weight:600; }
.hero-bottom i{ width:4px; height:4px; border-radius:50%; background: rgba(255,255,255,0.3); }

/* ===================== ECOSYSTEM ===================== */
.ecosystem{ padding: 120px 0 110px; background: var(--white); }
.split-heading{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:end; margin-bottom: 68px; }
.split-heading h2{ font-size: 34px; }
.split-heading > p{ color: var(--gray); font-size: 16.5px!important; max-width: 420px; }

.system-map{ position:relative; width:100%; aspect-ratio: 1000 / 520; max-width: 980px; margin: 0 auto; }
.map-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.map-lines path{ fill:none; stroke: rgba(37,99,235,0.28); stroke-width:1.5; stroke-dasharray:7 10; animation: map-flow 5s linear infinite; }
.map-pulse{ fill:var(--blue-light); opacity:.9; filter:drop-shadow(0 0 5px rgba(96,165,250,.8)); }
.pulse-a{ animation: pulse-a 7s ease-in-out infinite; }
.pulse-b{ animation: pulse-b 9s ease-in-out infinite; }
.pulse-c{ animation: pulse-c 8s ease-in-out infinite; }

.map-core{
    position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
    width: 128px; height:128px; border-radius:50%;
    background: linear-gradient(160deg, var(--ink-2), var(--ink));
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:#fff; font-weight:800; font-size:14px; letter-spacing:.5px;
    box-shadow: 0 16px 40px rgba(17,24,39,0.28);
    z-index:2;
}
.map-core i{ position:absolute; inset:-14px; border-radius:50%; border: 1px solid rgba(37,99,235,0.25); }
.map-core i::after{ content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(37,99,235,.1); animation: core-ring 3.6s ease-out infinite; }
.map-core small{ display:block; margin-top:3px; font-size:8px; letter-spacing:1px; color:var(--blue-light); }

.map-layer{
    position:absolute; transform: translate(-50%,-50%);
    width: 208px; padding: 18px 20px;
    background: var(--white); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); z-index:1;
}
.map-number{ display:block; font-size:12px!important; font-weight:700; color: var(--blue); letter-spacing: 1px; margin-bottom:6px; }
.map-layer h3{ font-size:15.5px; margin-bottom:4px; }
.map-layer p{ font-size:12.5px!important; color: var(--gray); line-height:1.45; }
.layer-connect{ background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 48%,rgba(255,255,255,.18) 100%),url('img/infraestrutura/conectividade-card.png'); background-size:cover; background-position:center; }
.layer-connect .map-number,.layer-connect h3,.layer-connect p{ position:relative; z-index:1; }
.layer-infra{ background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 48%,rgba(255,255,255,.16) 100%),url('img/infraestrutura/infraestrutura-card.png'); background-size:cover; background-position:center; }
.layer-infra .map-number,.layer-infra h3,.layer-infra p{ position:relative; z-index:1; }
.layer-security{ background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.84) 48%,rgba(255,255,255,.12) 100%),url('img/infraestrutura/seguranca-card.png'); background-size:cover; background-position:center; }
.layer-security .map-number,.layer-security h3,.layer-security p{ position:relative; z-index:1; }
.layer-monitor{ background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.82) 48%,rgba(255,255,255,.1) 100%),url('img/infraestrutura/operacao-card.png'); background-size:cover; background-position:center; }
.layer-monitor .map-number,.layer-monitor h3,.layer-monitor p{ position:relative; z-index:1; }
.layer-integration{ background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.82) 48%,rgba(255,255,255,.1) 100%),url('img/infraestrutura/integracao-card.png'); background-size:cover; background-position:center; }
.layer-integration .map-number,.layer-integration h3,.layer-integration p{ position:relative; z-index:1; }
.layer-connect{ left:19.5%; top:21.5%; animation: card-float-a 8s ease-in-out infinite; }
.layer-infra{ left:80.5%; top:21.5%; animation: card-float-b 9s ease-in-out infinite; }
.layer-security{ left:12.6%; top:64.4%; animation: card-float-c 8.5s ease-in-out infinite; }
.layer-monitor{ left:87.4%; top:64.4%; animation: card-float-b 7.5s ease-in-out infinite reverse; }
.layer-integration{ left:50%; top:88.8%; animation: card-float-a 9.5s ease-in-out infinite reverse; }
.map-layer:hover{ border-color:rgba(37,99,235,.42); box-shadow:0 14px 34px rgba(37,99,235,.12); }

@keyframes map-flow{ to{ stroke-dashoffset:-34; } }
@keyframes core-ring{ 0%,55%{ transform:scale(.82); opacity:0; } 70%{ opacity:.65; } 100%{ transform:scale(1.18); opacity:0; } }
@keyframes card-float-a{ 0%,100%{ margin-top:0; } 50%{ margin-top:-7px; } }
@keyframes card-float-b{ 0%,100%{ margin-top:0; } 50%{ margin-top:6px; } }
@keyframes card-float-c{ 0%,100%{ margin-left:0; } 50%{ margin-left:6px; } }
@keyframes pulse-a{ 0%,100%{ cx:500; cy:260; opacity:0; } 15%{ opacity:1; } 48%{ cx:195; cy:112; opacity:.9; } 52%,100%{ opacity:0; } }
@keyframes pulse-b{ 0%,100%{ cx:500; cy:260; opacity:0; } 15%{ opacity:1; } 48%{ cx:805; cy:112; opacity:.9; } 52%,100%{ opacity:0; } }
@keyframes pulse-c{ 0%,100%{ cx:500; cy:260; opacity:0; } 15%{ opacity:1; } 48%{ cx:126; cy:335; opacity:.9; } 52%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .map-lines path,.map-pulse,.map-core i::after,.map-layer{ animation:none!important; } }

.ecosystem-foot{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top: 56px; }
.ecosystem-foot span{ font-size:13px!important; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--gray); }
.ecosystem-foot i{ width:24px; height:1px; background: var(--line); }

/* ===================== SOLUTIONS ===================== */
.solutions{ padding: 100px 0; background: var(--bg); }
.solutions-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
.solutions-heading h2{ font-size: 30px; margin-bottom: 14px; }
.solutions-heading p{ color: var(--gray); font-size: 16px!important; max-width: 320px; }
.solution-list{ border-top: 1px solid var(--line); }
.solution-list a{
    display:flex; align-items:center; gap: 20px;
    padding: 22px 4px; border-bottom: 1px solid var(--line);
    transition: padding-left .2s ease;
}
.solution-list a:hover{ padding-left: 12px; }
.solution-list a span{ font-size:13px!important; font-weight:700; color: var(--blue); width: 26px; flex-shrink:0; }
.solution-list a strong{ font-size: 19px; font-weight:700; flex:1; }
.solution-list a i{ font-style:normal; color: var(--gray); transition: transform .2s ease, color .2s ease; }
.solution-list a:hover i{ transform: translateX(6px); color: var(--blue); }

/* ===================== PROJECTS ===================== */
.projects{ padding: 110px 0; background: var(--white); }
.projects-heading{ max-width: 620px; margin-bottom: 48px; }
.projects-heading h2{ font-size: 32px; }
.projects-heading p{ color: var(--gray); font-size: 16px!important; margin-top: 12px; }
.project-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.project{ position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3; }
.project img{ width:100%; height:100%; object-fit:cover; filter: brightness(1.32) contrast(.9) saturate(.9); }
.project-photo img{ filter: brightness(1.04) contrast(.98) saturate(.96); }
.project div{
    position:absolute; left:0; right:0; bottom:0; padding: 24px 26px;
    background: linear-gradient(0deg, rgba(11,18,32,0.92), rgba(11,18,32,0) 75%);
    color:#fff;
}
.project span{ font-size:12px!important; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--blue-light); }
.project h3{ font-size: 21px; color:#fff; margin: 6px 0 4px; }
.project p{ font-size: 13.5px!important; color: rgba(255,255,255,0.72); max-width: 340px; }
.project-note{ margin-top: 24px; font-size: 13px!important; color: var(--gray); }

/* ===================== CTA ===================== */
.cta{ padding: 96px 0; text-align:center; background: linear-gradient(120deg, var(--blue-dark), var(--blue)); color:#fff; }
.cta .kicker{ color: rgba(255,255,255,0.85); }
.cta-inner{ max-width: 620px; margin: 0 auto; }
.cta h2{ font-size: 34px; color:#fff; margin-bottom: 16px; }
.cta > .container > p, .cta-inner > p{ font-size: 16.5px!important; color: rgba(255,255,255,0.85); margin-bottom: 34px; }
.cta-actions{ display:flex; align-items:center; justify-content:center; gap: 26px; flex-wrap: wrap; }
.cta-email{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:#fff; border-bottom: 1.5px solid rgba(255,255,255,0.4); padding-bottom:2px; transition: border-color .2s ease; }
.cta-email:hover{ border-color:#fff; }

/* ===================== FOOTER ===================== */
.footer{ background: var(--ink-2); color: rgba(255,255,255,0.55); padding: 44px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 18px; }
.footer-inner > p{ font-size: 13.5px!important; color: rgba(255,255,255,0.45); margin-right:auto; margin-left: -6px; }
.footer-inner div{ display:flex; align-items:center; gap: 24px; }
.footer-inner div a{ font-size: 14px!important; font-weight:600; color: rgba(255,255,255,0.65); transition: color .2s ease; }
.footer-inner div a:hover{ color:#fff; }
.footer small{ font-size:13px!important; width:100%; padding-top: 20px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }

/* ===================== RESPONSIVE ===================== */
.ecosystem-showcase{ padding: 0 0 120px; background: var(--white); }
.showcase-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items:center; }
.showcase-image{ position:relative; min-height:390px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--ink-2); }
.showcase-image img{ width:100%; height:100%; min-height:390px; object-fit:cover; filter:brightness(1.05) contrast(.96) saturate(.96); }
.image-tag{ position:absolute; left:22px; bottom:22px; padding:10px 16px; border-radius:999px; color:#fff; background:rgba(11,18,32,.78); border:1px solid rgba(255,255,255,.18); font-size:12px!important; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.showcase-copy h2{ font-size:34px; margin-bottom:16px; }
.showcase-copy > p:not(.kicker){ color:var(--gray); font-size:16.5px!important; max-width:460px; margin-bottom:28px; }
.service-chips{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.service-chips span{ display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:13px!important; font-weight:600; background:#fff; box-shadow:0 5px 18px rgba(17,24,39,.04); }
.service-chips b{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:var(--blue); background:rgba(37,99,235,.09); font-size:15px; }
.sustentacao{ padding:110px 0 76px; color:#fff; background-image:linear-gradient(90deg,rgba(8,15,29,.97) 0%,rgba(11,24,45,.9) 48%,rgba(11,24,45,.74) 100%),url('img/infraestrutura/sustentacao-tecnologica.png'); background-size:cover; background-position:center; }
.sustentacao .kicker{ color:var(--blue-light); }
.sustentacao-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:72px; align-items:start; }
.sustentacao h2{ color:#fff; font-size:34px; margin-bottom:18px; }
.sustentacao-lead{ color:rgba(255,255,255,.68); font-size:16.5px!important; max-width:430px; margin-bottom:30px; }
.maintenance-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
.maintenance-cards article{ padding:20px 22px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.055); }
.maintenance-cards span{ color:var(--blue-light); font-size:12px!important; font-weight:800; letter-spacing:1px; }
.maintenance-cards h3{ color:#fff; font-size:17px; margin:4px 0 3px; }
.maintenance-cards p{ color:rgba(255,255,255,.62); font-size:13.5px!important; line-height:1.5; }
.maintenance-cycle{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:78px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); }
.maintenance-cycle span{ color:rgba(255,255,255,.72); font-size:12px!important; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.maintenance-cycle i{ width:22px; height:1px; background:rgba(96,165,250,.55); }

@media screen and (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-system{ order:-1; aspect-ratio: 16/10; }
    .split-heading{ grid-template-columns: 1fr; gap: 20px; }
    .solutions-grid{ grid-template-columns: 1fr; gap: 32px; }
    .showcase-grid,.sustentacao-grid{ grid-template-columns:1fr; gap:40px; }
}

@media screen and (max-width: 760px){
    .nav-toggle{ display:block; position:relative; z-index:2; }
    .nav-links{
        position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:320px;
        background: var(--ink-2); flex-direction:column; align-items:flex-start;
        padding: 100px 28px 28px; transition: right .3s ease; gap:4px;
    }
    .nav-links.open{ right:0; }
    .nav-links a{ color:#fff!important; width:100%; padding:14px 12px; }
    .hero{ padding-top: 128px; }
    .hero-copy h1{ font-size: 32px; }
    .hero-label{ font-size: 11px!important; padding: 6px 10px 6px 8px; }
    .label-network{ left: 50%; top: 22%; }
    .system-map{ aspect-ratio: auto; height: auto; }
    .map-lines{ display:none; }
    .system-map{ display:flex; flex-direction:column; align-items:center; gap: 16px; }
    .map-core{ position:static; transform:none; margin-bottom: 4px; }
    .map-core i{ display:none; }
    .map-layer{ position:static; transform:none; width:100%; max-width: 360px; }
    .project-grid{ grid-template-columns: 1fr; }
    .cta h2{ font-size: 26px; }
    .ecosystem-showcase{ padding-bottom:80px; }
    .showcase-image,.showcase-image img{ min-height:280px; }
    .showcase-copy h2,.sustentacao h2{ font-size:28px; }
    .service-chips{ grid-template-columns:1fr; }
    .sustentacao{ padding:80px 0 58px; }
    .maintenance-cycle{ flex-wrap:wrap; gap:10px; margin-top:52px; }
    .footer-inner{ flex-direction: column; align-items:flex-start; }
    .footer-inner > p{ margin: 0; }
}

/* Compact ecosystem cards: photos stay clean and details open on hover. */
@media screen and (min-width: 761px){
    .map-layer{
        width:250px; min-height:92px; padding:15px 16px;
        overflow:hidden; transition:width .28s ease,min-height .28s ease,box-shadow .28s ease,border-color .28s ease;
        background-image:none!important;
    }
    .map-layer::before{
        content:''; position:absolute; top:0; right:0; bottom:0; width:40%;
        background-image:var(--card-image); background-size:cover; background-position:center;
        z-index:0; transition:width .28s ease;
    }
    .map-layer::after{ display:none; }
    .map-layer h3{ font-size:16px; margin-bottom:3px; }
    .map-layer p{ font-size:11.5px!important; white-space:nowrap; }
    .map-layer h3::after{ display:none; content:''; font-size:12px; line-height:1.4; font-weight:500; color:#64748b; margin-top:7px; max-width:190px; }
    .map-layer:hover{ width:360px; min-height:132px; z-index:10; box-shadow:0 18px 42px rgba(15,41,77,.18); border-color:rgba(37,99,235,.5); }
    .map-layer:hover::before{ width:46%; }
    .map-layer:hover p{ display:none; }
    .layer-connect:hover h3::after{ display:block; content:'Redes estáveis e Wi-Fi preparados para conectar pessoas, ambientes e sistemas.'; }
    .layer-infra:hover h3::after{ display:block; content:'Racks, fibra e cabeamento organizados para uma infraestrutura confiável e expansível.'; }
    .layer-security:hover h3::after{ display:block; content:'CFTV, acesso e análise para proteger ambientes e apoiar decisões.'; }
    .layer-monitor:hover h3::after{ display:block; content:'Monitoramento e suporte para acompanhar a operação e agir rapidamente.'; }
    .layer-integration:hover h3::after{ display:block; content:'Automação e sistemas integrados para transformar dados em operação.'; }
}
@media screen and (max-width: 760px){
    .map-layer{ background-image:none!important; }
    .map-layer::before{ content:''; display:block; height:96px; margin:-21px -20px 16px; background-image:var(--card-image); background-size:cover; background-position:center; }
    .map-layer::after{ display:none; }
}

/* Focus expansion: each compact node opens into a large explanatory panel. */
@media screen and (min-width: 761px){
    .map-layer{
        width:250px; height:92px; min-height:92px; padding:15px 16px;
        transform:translate(-50%,-50%) scale(1);
        transform-origin:center center;
        transition:width .42s cubic-bezier(.2,.8,.2,1),height .42s cubic-bezier(.2,.8,.2,1),padding .42s ease,transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
    }
    .map-layer::before{ width:40%; transition:width .42s cubic-bezier(.2,.8,.2,1); }
    .map-layer h3{ font-size:16px; transition:font-size .35s ease; }
    .map-layer p{ transition:opacity .2s ease; }
    .map-layer h3::after{ display:none; }
    .map-layer:hover,.map-layer:focus-within{
        width:430px; height:220px; min-height:220px; padding:30px 28px;
        transform:translate(-50%,-50%) scale(1);
        box-shadow:0 26px 70px rgba(15,41,77,.28); border-color:rgba(37,99,235,.5);
    }
    .map-layer:hover::before,.map-layer:focus-within::before{ width:43%; }
    .map-layer:hover h3,.map-layer:focus-within h3{ font-size:25px; margin-bottom:0; }
    .map-layer:hover p,.map-layer:focus-within p{ display:none; }
    .map-layer:hover h3::after,.map-layer:focus-within h3::after{
        display:block; max-width:225px; margin-top:15px; font-size:13px; line-height:1.55; font-weight:500; color:#64748b;
    }
    .layer-connect:hover h3::after,.layer-connect:focus-within h3::after{ content:'Redes estáveis e Wi-Fi preparados para conectar pessoas, ambientes e sistemas, com uma base organizada para crescer.'; }
    .layer-infra:hover h3::after,.layer-infra:focus-within h3::after{ content:'Racks, fibra e cabeamento estruturado para entregar desempenho, organização e expansão sem improvisos.'; }
    .layer-security:hover h3::after,.layer-security:focus-within h3::after{ content:'CFTV, controle de acesso e análise inteligente para proteger ambientes e apoiar decisões mais rápidas.'; }
    .layer-monitor:hover h3::after,.layer-monitor:focus-within h3::after{ content:'Monitoramento e suporte contínuos para acompanhar a operação, identificar alertas e agir rapidamente.'; }
    .layer-integration:hover h3::after,.layer-integration:focus-within h3::after{ content:'Automação, sistemas e dados conectados para reduzir tarefas manuais e transformar informação em operação.'; }
}
@media screen and (max-width: 760px){
    .map-layer h3::after{ display:block; content:'Conheça esta frente de atuação da Jobbox IT.'; margin-top:8px; font-size:12px; line-height:1.4; font-weight:500; color:#64748b; }
    .layer-connect h3::after{ content:'Redes estáveis e Wi-Fi para conectar pessoas, ambientes e sistemas.'; }
    .layer-infra h3::after{ content:'Fibra, racks e cabeamento para uma infraestrutura confiável e expansível.'; }
    .layer-security h3::after{ content:'CFTV, acesso e análise para proteger ambientes e apoiar decisões.'; }
    .layer-monitor h3::after{ content:'Monitoramento e suporte para acompanhar a operação continuamente.'; }
    .layer-integration h3::after{ content:'Automação e sistemas integrados para transformar dados em operação.'; }
}

/* Stable nodes: motion belongs to the connection layer, not to the cards. */
.map-layer{ animation:none!important; }
.map-layer .map-number{ display:none; }
.map-layer > *{ max-width:52%; }
.map-layer h3{ overflow-wrap:normal; }
.map-layer p{ white-space:normal; line-height:1.35; }
.map-layer h3::after{ max-width:100%!important; overflow-wrap:normal; }
@media screen and (min-width: 761px){
    .map-layer:hover h3::after,.map-layer:focus-within h3::after{ max-width:100%!important; }
}
@media screen and (max-width: 760px){
    .map-layer > *{ max-width:100%; }
}

/* Sustentação: present NOC IA as the continuous operations layer. */
.sustentacao h2{ font-size:0; }
.sustentacao h2::before{ content:'NOC IA para sustentar sua operação.'; display:block; font-size:34px; line-height:1.18; }
.sustentacao .sustentacao-lead{ font-size:0!important; }
.sustentacao .sustentacao-lead::before{ content:'O NOC IA acompanha a infraestrutura continuamente, identifica sinais de falha, organiza alertas e apoia a equipe na resposta aos incidentes.'; display:block; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.68); }
@media screen and (max-width: 760px){
    .sustentacao h2::before{ font-size:28px; }
    .sustentacao .sustentacao-lead::before{ font-size:16px; }
}

/* NOC IA Sustentação showcase */
.sustentacao{
    position:relative; overflow:hidden; padding:108px 0 78px;
    background:#111827; background-image:radial-gradient(circle at 88% 18%,rgba(37,99,235,.22),transparent 34%),linear-gradient(135deg,#08111f,#111827 64%,#0b1b35);
}
.sustentacao::before{ content:''; position:absolute; width:540px; height:540px; right:-260px; top:-170px; border-radius:50%; border:1px solid rgba(37,99,235,.18); box-shadow:0 0 0 38px rgba(37,99,235,.035),0 0 0 76px rgba(37,99,235,.025); }
.sustentacao-grid{ position:relative; z-index:1; grid-template-columns:.78fr 1.22fr; gap:56px; align-items:center; }
.sustentacao .kicker{ font-size:0!important; width:220px; height:66px; margin-bottom:22px; padding:0; background:url('img/infraestrutura/noc-ia-logo-source.png') center/contain no-repeat; }
.sustentacao h2{ font-size:0; max-width:410px; }
.sustentacao h2::before{ content:'Monitoramento em camadas. Inteligência que antecipa.'; font-size:38px; line-height:1.14; }
.sustentacao .sustentacao-lead{ font-size:0!important; max-width:440px; }
.sustentacao .sustentacao-lead::before{ content:'O NOC IA acompanha sua infraestrutura em tempo real, identifica sinais de atenção e ajuda sua equipe a agir antes que um incidente se transforme em indisponibilidade.'; display:block; font-size:16px; line-height:1.65; color:rgba(255,255,255,.68); }
.sustentacao .button-blue{ background:#2563EB; }
.sustentacao .button-blue{ font-size:0; }
.sustentacao .button-blue::before{ content:'Conheça o NOC IA'; font-size:15px; }
.maintenance-cards{ grid-template-columns:1fr 1fr; gap:16px; }
.maintenance-cards article{ min-width:0; padding:0 0 20px; overflow:hidden; background:#18263b; border:1px solid rgba(148,163,184,.18); border-radius:16px; }
.maintenance-cards article::before{ content:''; display:block; height:158px; margin-bottom:19px; background-size:cover; background-position:center; border-bottom:1px solid rgba(96,165,250,.18); }
.maintenance-cards article:nth-child(1)::before{ height:220px; background-image:url('img/infraestrutura/noc-ia-desktop-anon.png'); background-position:center; background-size:contain; background-repeat:no-repeat; background-color:#0b1220; }
.maintenance-cards article:nth-child(2)::before{ height:260px; background-image:url('img/infraestrutura/noc-ia-mobile-anon.jpg'); background-position:center; background-size:contain; background-repeat:no-repeat; background-color:#0b1220; }
.maintenance-cards article:nth-child(3){ grid-column:1/-1; padding:22px; background:rgba(37,99,235,.10); }
.maintenance-cards article:nth-child(3)::before{ display:none; }
.maintenance-cards article > *:not(:first-child){ margin-left:22px; margin-right:22px; }
.maintenance-cards article > span{ display:none; }
.maintenance-cards article h3{ color:#fff; font-size:18px; }
.maintenance-cards article p{ color:rgba(255,255,255,.62); font-size:13.5px!important; line-height:1.5; }
.maintenance-cards article:nth-child(1) h3{ font-size:0; }
.maintenance-cards article:nth-child(1) h3::before{ content:'Visão centralizada'; font-size:18px; }
.maintenance-cards article:nth-child(1) p{ font-size:0!important; }
.maintenance-cards article:nth-child(1) p::before{ content:'Dashboard completo para acompanhar disponibilidade, saúde da rede e incidentes.'; font-size:13.5px; }
.maintenance-cards article:nth-child(2) h3{ font-size:0; }
.maintenance-cards article:nth-child(2) h3::before{ content:'Operação em mobilidade'; font-size:18px; }
.maintenance-cards article:nth-child(2) p{ font-size:0!important; }
.maintenance-cards article:nth-child(2) p::before{ content:'Notificações em tempo real na palma da mão, com alertas, equipamentos e mapa da infraestrutura.'; font-size:13.5px; }
.maintenance-cards article:nth-child(3) h3{ font-size:0; }
.maintenance-cards article:nth-child(3) h3::before{ content:'Antecipação e resposta'; font-size:18px; }
.maintenance-cards article:nth-child(3) p{ font-size:0!important; }
.maintenance-cards article:nth-child(3) p::before{ content:'Mais visibilidade para priorizar ações, reduzir riscos e manter a operação disponível.'; font-size:13.5px; }
.maintenance-cycle{ position:relative; z-index:1; }
@media screen and (max-width: 980px){
    .sustentacao-grid{ grid-template-columns:1fr; gap:38px; }
    .sustentacao h2{ max-width:620px; }
}
@media screen and (max-width: 760px){
    .sustentacao{ padding:78px 0 58px; }
    .sustentacao h2::before{ font-size:29px; }
    .sustentacao .kicker{ width:190px; height:58px; }
    .maintenance-cards{ grid-template-columns:1fr; }
    .maintenance-cards article:nth-child(3){ grid-column:auto; }
}

/* ===================== ECOSYSTEM / REFERENCE LAYOUT ===================== */
.ecosystem{ padding: 78px 0 64px; background: #f3f8fd; position:relative; overflow:hidden; }
.ecosystem::before,.ecosystem::after{ content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.58); pointer-events:none; }
.ecosystem::before{ width:520px; height:260px; left:-170px; top:70px; transform:rotate(18deg); }
.ecosystem::after{ width:560px; height:300px; right:-220px; bottom:-120px; transform:rotate(-18deg); }
.ecosystem .container{ position:relative; z-index:1; }
.split-heading{ display:block; text-align:center; margin-bottom:26px; }
.split-heading .kicker{ margin-bottom:10px; }
.split-heading h2{ font-size:34px; }
.split-heading h2{ font-size:0; }
.split-heading h2::before,.split-heading h2::after{ display:block; font-size:34px; line-height:1.18; }
.split-heading h2::before{ content:'Uma base sólida.'; }
.split-heading h2::after{ content:'Todas as soluções conectadas.'; }
.split-heading > p{ max-width:none; margin:6px auto 0; font-size:16.5px!important; color:#64748b; }
.system-map{ max-width:1120px; aspect-ratio:1120 / 545; }
.map-lines path{ stroke:rgba(37,99,235,.72); stroke-width:1.6; stroke-dasharray:0; }
.map-core{ width:172px; height:172px; font-size:23px; letter-spacing:-.5px; line-height:1.12; box-shadow:0 18px 38px rgba(11,52,117,.28); }
.map-core span{ font-size:0; }
.map-core span::before,.map-core span::after{ display:block; }
.map-core span::before{ content:'Base óptica'; font-size:23px; }
.map-core span::after{ content:'Arquitetura GPON'; margin-top:8px; font-size:11px; font-weight:500; letter-spacing:0; color:rgba(255,255,255,.68); }
.map-core small{ margin-top:8px; font-size:11px; letter-spacing:.3px; color:rgba(255,255,255,.68); }
.map-core i{ inset:-9px; border-color:rgba(37,99,235,.18); }
.map-layer{ width:360px; min-height:132px; padding:25px 20px; border:1px solid rgba(148,163,184,.18); border-radius:13px; box-shadow:0 10px 26px rgba(15,41,77,.10); background-color:#fff; background-size:cover; background-position:center right; }
.map-layer::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 51%,rgba(255,255,255,.12) 100%); z-index:0; pointer-events:none; }
.map-layer > *{ position:relative; z-index:1; }
.map-layer h3{ font-size:20px; margin-bottom:3px; }
.map-layer p{ font-size:13px!important; color:#64748b; }
.layer-connect,.layer-infra,.layer-security,.layer-monitor,.layer-integration{ background-image:var(--card-image); }
.layer-connect{ --card-image:url('img/infraestrutura/conectividade-card.png'); left:20%; top:23%; }
.layer-infra{ --card-image:url('img/infraestrutura/infraestrutura-card.png'); left:80%; top:23%; }
.layer-security{ --card-image:url('img/infraestrutura/seguranca-card.png'); left:20%; top:65%; }
.layer-monitor{ --card-image:url('img/infraestrutura/operacao-card.png'); left:80%; top:65%; }
.layer-integration{ --card-image:url('img/infraestrutura/integracao-card.png'); left:50%; top:91%; }
.map-number{ font-size:13px!important; margin-bottom:7px; }
.ecosystem-foot{ margin-top:20px; padding-top:17px; border-top:1px solid rgba(148,163,184,.28); gap:20px; }
.ecosystem-foot span{ text-transform:none; letter-spacing:0; font-size:14px!important; color:#0f2346; }
.ecosystem-foot i{ width:42px; background:rgba(37,99,235,.24); }
@media screen and (max-width: 980px){
    .system-map{ max-width:820px; }
    .map-layer{ width:285px; }
}
@media screen and (max-width: 760px){
    .ecosystem{ padding:64px 0 52px; }
    .split-heading h2::before,.split-heading h2::after{ font-size:28px; }
    .split-heading > p{ font-size:15px!important; }
    .map-core{ width:148px; height:148px; font-size:20px; }
    .map-core span::before{ font-size:20px; }
    .map-layer{ min-height:118px; padding:21px 20px; }
    .ecosystem-foot{ margin-top:24px; flex-wrap:wrap; }
    .ecosystem-foot i{ width:20px; }
}