:root {
  --night: #07131b;
  --deep: #0b1c27;
  --panel: #102936;
  --paper: #f0f5f3;
  --soft: #9db1b5;
  --muted: #6c858b;
  --cyan: #4de1c1;
  --blue: #58a5ff;
  --line: rgba(198, 235, 232, .14);
  --max: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--night); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.container { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }
.mono { font: 12px/1.4 'DM Mono', monospace; letter-spacing: .04em; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; border-bottom: 1px solid rgba(198,235,232,.12); background: linear-gradient(180deg, rgba(4,14,21,.5), rgba(4,14,21,.08)); backdrop-filter: blur(12px); }
.nav { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; width: 112px; height: 66px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.85); border-radius: 8px; box-shadow: 0 9px 28px rgba(0,0,0,.2); transition: transform .25s, box-shadow .25s; }
.logo:hover { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(77,225,193,.18); }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.links { display: flex; gap: 30px; align-items: center; color: #c3d0d1; font-size: 13px; }
.links a { transition: color .2s, transform .2s; }
.links a:hover { color: var(--cyan); transform: translateY(-1px); }
.nav-action { padding: 14px 19px; border: 1px solid rgba(77,225,193,.7); color: var(--cyan); border-radius: 5px; background: rgba(77,225,193,.06); box-shadow: inset 0 0 0 1px rgba(77,225,193,.06); }
.nav-action:hover { background: var(--cyan); color: var(--night); }
.burger { display: none; border: 0; background: none; color: var(--paper); cursor: pointer; font-size: 26px; }

.hero { min-height: 100svh; height: auto; position: relative; overflow: hidden; padding: 150px 0 70px; background: radial-gradient(ellipse 70% 65% at 85% 34%, rgba(36,131,143,.16), transparent 70%), radial-gradient(ellipse 48% 65% at 4% 70%, rgba(25,72,109,.17), transparent 70%), var(--night); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .45; background: linear-gradient(rgba(103, 202, 194, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 202, 194, .07) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); pointer-events: none; }
.hero::after { content: ''; position: absolute; z-index: 0; width: 720px; height: 720px; right: -300px; top: -230px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 170, 171, .2), transparent 68%); filter: blur(2px); pointer-events: none; }
.hero-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .74; filter: saturate(.92) contrast(1.08) brightness(.82); pointer-events: none; transform: scale(1.015); }
.hero-video-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(4,14,21,.78) 0%, rgba(4,14,21,.34) 46%, rgba(4,14,21,.08) 100%), linear-gradient(0deg, rgba(4,14,21,.74) 0%, transparent 42%, rgba(4,14,21,.34) 100%); pointer-events: none; }
.network-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: .42; pointer-events: none; }
.network-hint { position: absolute; z-index: 2; right: 32px; bottom: 118px; color: rgba(157,177,181,.65); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.hero-grid { display: flex; align-items: flex-end; min-height: min(720px, calc(100svh - 230px)); position: relative; z-index: 2; }
.hero-copy { max-width: 720px; padding: 22px 0 18px 34px; border-left: 1px solid rgba(151,241,222,.42); background: linear-gradient(90deg, rgba(4,14,21,.34), transparent 78%); }
.hero-copy::before { content: '3PINES / INFRAESTRUTURA DIGITAL'; display: block; margin-bottom: 22px; color: rgba(198,235,232,.7); font: 10px 'DM Mono', monospace; letter-spacing: .1em; }
.hero-grid > .monitor { display: none; }
.hero .hero-lead { max-width: 570px; color: rgba(231,244,241,.82); }
.hero .buttons { margin-top: 10px; }
.hero .network-hint { right: 32px; bottom: 40px; }
.signal { display: inline-flex; align-items: center; gap: 11px; color: var(--cyan); margin-bottom: 28px; padding: 9px 14px; border: 1px solid rgba(77,225,193,.18); border-radius: 999px; background: rgba(77,225,193,.06); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.signal::before { content: ''; width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 5px rgba(77,225,193,.1), 0 0 18px var(--cyan); }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(3.2rem, 6.2vw, 6.2rem); line-height: .9; letter-spacing: -.105em; font-weight: 800; text-wrap: balance; text-shadow: 0 18px 50px rgba(0,0,0,.3); }
.hero h1 span { color: var(--cyan); background: linear-gradient(135deg, #9af7e3, var(--cyan) 58%, #55b5ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { max-width: 620px; margin: 24px 0 26px; color: var(--soft); font-size: clamp(1rem, 1.55vw, 1.16rem); line-height: 1.55; }
.buttons { display: flex; flex-wrap: wrap; gap: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 24px; border-radius: 7px; font-weight: 700; font-size: 14px; transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s; }
.button:hover { transform: translateY(-4px); }
.primary { color: #06201e; background: linear-gradient(135deg, #8ef3dc, var(--cyan)); box-shadow: 0 10px 30px rgba(77,225,193,.18), inset 0 1px 0 rgba(255,255,255,.55); }
.primary:hover { background: linear-gradient(135deg, #b1ffec, #70e9d0); box-shadow: 0 15px 36px rgba(77,225,193,.3); }
.outline { border: 1px solid rgba(240,245,243,.25); color: var(--paper); background: rgba(255,255,255,.035); backdrop-filter: blur(8px); }
.outline:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(77,225,193,.08); box-shadow: 0 10px 28px rgba(0,0,0,.15); }

.monitor { position: relative; background: linear-gradient(145deg, rgba(17,45,57,.62), rgba(7,23,33,.58)); border: 1px solid rgba(151,241,222,.44); border-radius: 14px; padding: 22px; box-shadow: 28px 28px 0 rgba(77,225,193,.05), 0 25px 70px rgba(0,0,0,.3); backdrop-filter: blur(9px); animation: cardIn .95s cubic-bezier(.16,1,.3,1) both, cardFloat 7s ease-in-out 1.2s infinite; }
.monitor::before { content: ''; position: absolute; top: -1px; right: 28px; width: 90px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 0 0 4px 4px; }
.monitor::after { content: ''; position: absolute; inset: 1px; border-radius: 13px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.13), transparent 24%, transparent 72%, rgba(77,225,193,.08)); opacity: .7; }
@keyframes cardIn { from { opacity: 0; transform: translate3d(110px, 18px, 0) rotate(3deg); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } }
@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.monitor-head { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--soft); }
.live { color: var(--cyan); }
.live::before { content: '●'; margin-right: 6px; font-size: 9px; }
.monitor-title { color: white; font-size: 17px; font-weight: 700; margin: 24px 0; }
.metric { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.metric:last-of-type { border-bottom: 0; }
.metric label { display: block; color: var(--soft); font-size: 12px; margin-bottom: 7px; }
.bar { width: 100%; height: 5px; background: rgba(255,255,255,.1); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.metric strong { color: var(--cyan); font: 15px 'DM Mono', monospace; }
.monitor-foot { margin-top: 20px; padding: 15px; border: 1px solid rgba(77,225,193,.1); border-radius: 8px; background: linear-gradient(90deg, rgba(77,225,193,.1), rgba(77,225,193,.035)); color: var(--soft); font-size: 11px; line-height: 1.6; }
.monitor .metric, .monitor .monitor-head, .monitor .monitor-title, .monitor .monitor-foot { position: relative; z-index: 1; }
.monitor .bar i { transform-origin: left; animation: barReveal 1.5s cubic-bezier(.16,1,.3,1) .65s both; }
@keyframes barReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-bottom { position: absolute; z-index: 2; left: 50%; right: 50%; bottom: 20px; width: min(calc(100% - 64px), var(--max)); transform: translateX(-50%); padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); }
.hero-bottom strong { color: var(--paper); font-weight: 500; }

.light { position: relative; overflow: hidden; color: var(--paper); background: linear-gradient(135deg, #dff4ee 0%, #e9f2f6 46%, #cfe8e6 100%); }
.light::before { content: ''; position: absolute; inset: 0; opacity: .42; pointer-events: none; background-image: linear-gradient(rgba(7,19,27,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(7,19,27,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.light::after { content: ''; position: absolute; width: 460px; height: 460px; right: -160px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(77,225,193,.34), transparent 68%); filter: blur(5px); pointer-events: none; }
.section { padding: 120px 0; }
.light > .container { position: relative; z-index: 1; }
.section-head { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; }
.kicker { color: #188a80; margin-bottom: 20px; }
.light h2 { color: var(--night); }
h2 { margin: 0; max-width: 780px; font-size: clamp(2.3rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.08em; }
.section-head p { color: #557076; margin: 0; line-height: 1.8; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; }
.pillar { position: relative; overflow: hidden; min-height: 330px; padding: 25px 25px 24px; border: 1px solid rgba(77,225,193,.3); border-radius: 15px; background: linear-gradient(145deg, rgba(16,41,54,.98), rgba(8,28,39,.97)); box-shadow: 0 18px 35px rgba(7,19,27,.12); transition: transform .35s, border-color .35s, box-shadow .35s; animation: pillarUp .7s cubic-bezier(.16,1,.3,1) both; }
.pillar:nth-child(2) { animation-delay: .12s; }
.pillar:nth-child(3) { animation-delay: .24s; }
.pillar::before { content: ''; position: absolute; width: 180px; height: 180px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(77,225,193,.25), transparent 68%); transition: transform .5s; }
.pillar::after { content: ''; position: absolute; width: 90px; height: 1px; left: 25px; bottom: 0; background: linear-gradient(90deg, var(--cyan), transparent); }
.pillar:hover { transform: translateY(-10px); border-color: rgba(77,225,193,.85); box-shadow: 0 25px 48px rgba(7,19,27,.22), 0 0 0 1px rgba(77,225,193,.08); }
.pillar:hover::before { transform: scale(1.5); }
.pillar:last-child { border-right: 1px solid rgba(77,225,193,.3); margin: 0; }
.pillar-number { position: relative; z-index: 1; color: var(--cyan); }
.pillar-icon { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; margin: 38px 0 24px; border: 1px solid rgba(77,225,193,.38); border-radius: 12px; color: var(--cyan); background: rgba(77,225,193,.08); font-size: 21px; box-shadow: inset 0 0 20px rgba(77,225,193,.06); }
.pillar-icon::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(77,225,193,.18); border-radius: 15px; animation: iconPulse 2.8s ease-in-out infinite; }
.pillar h3 { position: relative; z-index: 1; margin: 0 0 13px; color: white; font-size: 1.42rem; letter-spacing: -.055em; }
.pillar p { position: relative; z-index: 1; color: #a3bac0; line-height: 1.7; margin: 0; }
@keyframes pillarUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iconPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 0; transform: scale(1.18); } }

.architecture { background: var(--deep); overflow: hidden; }
.architecture .section-head p { color: var(--soft); }
.architecture h2 { color: white; }
.diagram { position: relative; min-height: 600px; margin-top: 76px; overflow: hidden; border: 1px solid rgba(77,225,193,.28); border-radius: 22px; background: radial-gradient(ellipse 65% 70% at 50% 50%, rgba(32,128,148,.2), transparent 68%), linear-gradient(145deg, #06151e, #0a2934 55%, #06151e); box-shadow: inset 0 0 110px rgba(0,0,0,.3), 0 25px 70px rgba(0,0,0,.2); }
.diagram::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(77,225,193,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(77,225,193,.1) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, black 13%, black 87%, transparent); pointer-events: none; }
.world-header { position: absolute; z-index: 4; top: 25px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; color: #93b5b5; }
.world-header strong { color: var(--paper); font: 12px 'DM Mono', monospace; letter-spacing: .08em; }
.world-live { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font: 11px 'DM Mono', monospace; }
.world-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: iconPulse 1.8s ease-in-out infinite; }
.map-svg { position: absolute; inset: 64px 3% 42px; width: 94%; height: calc(100% - 106px); overflow: visible; }
.map-ocean { fill: rgba(33,122,143,.15); stroke: rgba(114,221,214,.2); stroke-width: .8; vector-effect: non-scaling-stroke; }
.country { fill: rgba(122,224,211,.16); stroke: rgba(150,238,225,.38); stroke-width: .55; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.country:hover { fill: rgba(77,225,193,.4); stroke: rgba(207,255,245,.75); }
.graticule { fill: none; stroke: rgba(133,214,216,.16); stroke-width: .7; vector-effect: non-scaling-stroke; }
.route { fill: none; stroke: rgba(77,225,193,.86); stroke-width: 1.45; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; animation: routeFlow 5s linear infinite; filter: drop-shadow(0 0 4px rgba(77,225,193,.8)); }
.route.blue { stroke: rgba(88,165,255,.9); animation-duration: 6.5s; }
.route.slow { animation-duration: 8s; }
.map-node { fill: var(--cyan); stroke: rgba(77,225,193,.25); stroke-width: 10; paint-order: stroke; animation: nodeBreath 2.4s ease-in-out infinite; filter: drop-shadow(0 0 5px var(--cyan)); }
.map-node.blue { fill: var(--blue); animation-delay: .8s; filter: drop-shadow(0 0 5px var(--blue)); }
.map-data { fill: white; filter: drop-shadow(0 0 5px var(--cyan)); }
.map-label { fill: #a7c4c4; font: 10px 'DM Mono', monospace; letter-spacing: .06em; }
.map-label.hot { fill: var(--cyan); }
.map-legend { position: absolute; z-index: 4; left: 30px; bottom: 24px; display: flex; gap: 18px; color: #769597; font: 10px 'DM Mono', monospace; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 6px; height: 6px; display: block; border-radius: 50%; background: var(--cyan); }
.map-legend span:last-child i { background: var(--blue); }
.map-card { position: absolute; z-index: 5; width: 174px; padding: 14px 15px; border: 1px solid rgba(145,235,221,.25); border-radius: 10px; background: rgba(7,26,36,.82); box-shadow: 0 14px 30px rgba(0,0,0,.18); backdrop-filter: blur(10px); animation: mapCardFloat 5s ease-in-out infinite; }
.map-card small { display: block; color: #7da0a2; font: 9px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.map-card strong { display: block; color: white; font-size: 13px; margin-bottom: 5px; }
.map-card span { color: var(--cyan); font: 10px 'DM Mono', monospace; }
.latency-chip { position: absolute; z-index: 5; right: 30px; top: 78px; display: inline-flex; align-items: center; gap: 8px; color: #9db9ba; font: 10px 'DM Mono', monospace; letter-spacing: .04em; }
.latency-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: iconPulse 2s ease-in-out infinite; }
.latency-chip strong { color: var(--cyan); font-weight: 500; }
.map-card.left { left: 28px; top: 125px; }
.map-card.right { right: 28px; bottom: 96px; animation-delay: -2.3s; }
@keyframes routeFlow { to { stroke-dashoffset: -52; } }
@keyframes nodeBreath { 0%, 100% { opacity: .75; transform: scale(.92); transform-origin: center; } 50% { opacity: 1; transform: scale(1.08); transform-origin: center; } }
@keyframes mapCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.architecture-note { margin-top: 26px; color: var(--soft); font-size: 12px; }

.proof { position: relative; overflow: hidden; color: var(--paper); background: linear-gradient(135deg, #0b202b, #07151e 62%, #0d3035); }
.proof::before { content: ''; position: absolute; width: 680px; height: 680px; left: -240px; bottom: -350px; border: 1px solid rgba(77,225,193,.18); border-radius: 50%; box-shadow: 0 0 0 34px rgba(77,225,193,.025), 0 0 0 68px rgba(77,225,193,.02), 0 0 0 102px rgba(77,225,193,.015); pointer-events: none; }
.proof::after { content: ''; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(77,225,193,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(77,225,193,.1) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, black 20%, transparent 90%); pointer-events: none; }
.proof > .container { position: relative; z-index: 1; }
.proof-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 90px; align-items: center; }
.proof .kicker { color: var(--cyan); }
.proof h2 { max-width: 520px; color: white; }
.stats { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { position: relative; overflow: hidden; min-height: 165px; padding: 25px; border: 1px solid rgba(77,225,193,.2); border-radius: 13px; background: linear-gradient(145deg, rgba(19,59,68,.8), rgba(7,27,38,.86)); box-shadow: 0 18px 35px rgba(0,0,0,.16); transition: transform .3s, border-color .3s, background .3s; }
.stat::after { content: ''; position: absolute; width: 100px; height: 100px; right: -48px; bottom: -54px; border-radius: 50%; background: radial-gradient(circle, rgba(77,225,193,.25), transparent 68%); }
.stat:hover { transform: translateY(-6px); border-color: rgba(77,225,193,.68); background: linear-gradient(145deg, rgba(23,75,82,.9), rgba(7,27,38,.9)); }
.stat strong { position: relative; z-index: 1; display: block; color: var(--cyan); font: 700 2.8rem 'DM Mono', monospace; letter-spacing: -.08em; }
.stat span { position: relative; z-index: 1; display: block; max-width: 180px; color: #a3bac0; font-size: 13px; line-height: 1.5; }
.statement { position: relative; margin-top: 58px; padding: 25px 0 0 20px; border-top: 1px solid rgba(77,225,193,.24); color: #a3bac0; line-height: 1.75; max-width: 540px; }
.statement::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 0; width: 2px; background: linear-gradient(var(--cyan), transparent); }
.proof .stats::before { content: 'sinais de confiança'; position: absolute; right: 0; top: -34px; color: rgba(163,186,192,.72); font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.proof .stat:nth-child(1) { animation: statIn .7s cubic-bezier(.16,1,.3,1) both; }
.proof .stat:nth-child(2) { animation: statIn .7s .1s cubic-bezier(.16,1,.3,1) both; }
.proof .stat:nth-child(3) { animation: statIn .7s .2s cubic-bezier(.16,1,.3,1) both; }
.proof .stat:nth-child(4) { animation: statIn .7s .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes statIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.clients { margin-top: 90px; padding-top: 30px; border-top: 1px solid rgba(77,225,193,.18); overflow: hidden; }
.clients-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; color: #8ba9ad; }
.clients-head strong { color: var(--paper); font: 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.clients-head span { font-size: 10px; }
.client-window { position: relative; margin: 24px -4vw 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-track { display: flex; gap: 14px; width: max-content; animation: clientMarquee 34s linear infinite; }
.client-window:hover .client-track { animation-play-state: paused; }
.client { flex: 0 0 220px; min-height: 132px; padding: 18px 20px 16px; border: 1px solid rgba(77,225,193,.16); border-radius: 11px; color: #a5c0c1; background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); transition: color .25s, border-color .25s, transform .25s, background .25s; }
.client:hover { color: var(--cyan); border-color: rgba(77,225,193,.65); transform: translateY(-5px); background: rgba(77,225,193,.08); }
.client-logo { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 43px; }
.client-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 39px; object-fit: contain; object-position: left center; }
.client.dell .client-logo img { width: 154px; filter: brightness(0) invert(1); }
.client.macro .client-logo img { width: 145px; }
.client.viventi .client-logo img { width: 145px; }
.client.paneas .client-logo img { width: 126px; }
.client.talk .client-logo img { width: 178px; }
.client small { display: block; margin-top: 13px; color: #86a2a5; font: 10px/1.5 'DM Mono', monospace; letter-spacing: .02em; }
@keyframes clientMarquee { to { transform: translateX(calc(-50% - 7px)); } }

.contact { position: relative; overflow: hidden; padding: 118px 0 110px; color: var(--paper); background: radial-gradient(ellipse 56% 90% at 88% 35%, rgba(41,154,150,.22), transparent 68%), radial-gradient(ellipse 45% 80% at 0% 100%, rgba(33,92,140,.18), transparent 72%), #06131b; isolation: isolate; }
.contact::before { content: ''; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(77,225,193,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(77,225,193,.12) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 92%); pointer-events: none; }
.contact::after { content: ''; position: absolute; width: 720px; height: 720px; right: -270px; top: -250px; border: 1px solid rgba(77,225,193,.2); border-radius: 50%; box-shadow: 0 0 0 34px rgba(77,225,193,.035), 0 0 0 68px rgba(77,225,193,.025), 0 0 0 102px rgba(77,225,193,.015); pointer-events: none; }
.contact > .container { position: relative; z-index: 1; }
.contact-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 90px; align-items: center; }
.contact .kicker { color: var(--cyan); margin-bottom: 24px; }
.contact h2 { max-width: 700px; color: white; font-size: clamp(2.8rem, 5.7vw, 5.7rem); }
.contact h2 span { color: var(--cyan); }
.contact-lead { max-width: 530px; margin: 28px 0 0; color: #9db1b5; font-size: 16px; line-height: 1.75; }
.contact-note { display: flex; align-items: center; gap: 10px; margin-top: 34px; color: #87a1a5; font: 10px 'DM Mono', monospace; letter-spacing: .04em; }
.contact-note::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: iconPulse 2s ease-in-out infinite; }
.contact-panel { position: relative; padding: 26px; border: 1px solid rgba(77,225,193,.3); border-radius: 16px; background: linear-gradient(145deg, rgba(20,62,70,.82), rgba(6,24,34,.92)); box-shadow: 0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.contact-panel::before { content: ''; position: absolute; top: -1px; right: 28px; width: 82px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.contact-panel-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(198,235,232,.14); color: #8ca8ac; font-size: 10px; }
.contact-panel-head strong { color: var(--cyan); font-weight: 500; }
.contact-panel-title { margin: 25px 0 22px; color: white; font-size: 22px; line-height: 1.25; letter-spacing: -.04em; }
.contact-actions { display: grid; gap: 10px; }
.contact-actions .button { width: 100%; min-height: 54px; }
.contact-details { display: grid; gap: 11px; margin-top: 23px; padding-top: 20px; border-top: 1px solid rgba(198,235,232,.14); color: #8ea8ab; font: 11px/1.5 'DM Mono', monospace; }
.contact-detail { display: flex; justify-content: space-between; gap: 18px; }
.contact-detail span:last-child { color: #d1e2df; text-align: right; }
.contact .dark-button { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--paper); }
.contact .dark-button:hover { border-color: var(--cyan); background: rgba(77,225,193,.12); color: var(--cyan); }
.contact .primary { color: #06201e; }
@media (max-width: 800px) {
  .contact { padding: 84px 0 78px; }
  .contact-shell { grid-template-columns: 1fr; gap: 42px; }
  .contact-panel { max-width: 520px; }
  .contact h2 { font-size: clamp(2.65rem, 13vw, 4.3rem); }
}
footer { padding: 52px 0 28px; color: var(--muted); background: #06131b; border-top: 1px solid rgba(77,225,193,.15); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .9fr; gap: 60px; padding-bottom: 38px; }
.footer-brand { color: var(--paper); font-size: 16px; font-weight: 800; margin-bottom: 15px; }
.footer-about { max-width: 300px; color: #80999e; font: 12px/1.7 'DM Mono', monospace; }
.footer-title { color: var(--paper); font: 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.footer-links { display: grid; gap: 10px; color: #9bb0b2; font-size: 13px; }
.footer-links a:hover { color: var(--cyan); }
.socials { display: flex; gap: 9px; }
.social { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(77,225,193,.2); border-radius: 8px; color: var(--cyan); font-size: 12px; font-weight: 800; transition: background .25s, transform .25s, border-color .25s; }
.social:hover { background: rgba(77,225,193,.12); border-color: var(--cyan); transform: translateY(-3px); }
.footer-line { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 10; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--night); background: var(--cyan); box-shadow: 0 12px 32px rgba(77,225,193,.3); }
.whatsapp svg { width: 27px; height: 27px; fill: currentColor; }
.assistant-launcher { position: fixed; right: 24px; bottom: 94px; z-index: 22; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(77,225,193,.8); border-radius: 50%; color: var(--cyan); background: #0b2732; box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 0 6px rgba(77,225,193,.06); cursor: pointer; transition: transform .25s, background .25s, color .25s; }
.assistant-launcher:hover { transform: translateY(-4px); color: var(--night); background: var(--cyan); }
.assistant-launcher.is-hidden { opacity: 0; pointer-events: none; transform: scale(.82); }
.assistant-launcher svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-panel { position: fixed; right: 24px; bottom: 94px; z-index: 21; width: min(390px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgba(77,225,193,.36); border-radius: 16px; color: var(--paper); background: linear-gradient(145deg, rgba(15,48,58,.98), rgba(5,20,29,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 0 6px rgba(77,225,193,.04); backdrop-filter: blur(18px); animation: assistantIn .3s cubic-bezier(.16,1,.3,1) both; }
.assistant-panel[hidden] { display: none; }
@keyframes assistantIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.assistant-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid rgba(198,235,232,.14); background: rgba(77,225,193,.045); }
.assistant-identity { display: flex; align-items: center; gap: 11px; }
.assistant-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(77,225,193,.45); border-radius: 10px; color: var(--cyan); background: rgba(77,225,193,.1); }
.assistant-avatar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.assistant-name { color: white; font-size: 13px; font-weight: 700; }
.assistant-status { margin-top: 3px; color: #86a5a8; font: 9px 'DM Mono', monospace; }
.assistant-status::before { content: '●'; margin-right: 5px; color: var(--cyan); font-size: 8px; }
.assistant-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #aac0c1; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }
.assistant-close:hover { border-color: var(--cyan); color: var(--cyan); }
.assistant-messages { display: grid; gap: 10px; max-height: 220px; overflow-y: auto; padding: 18px 18px 8px; }
.assistant-message { max-width: 88%; padding: 11px 13px; border: 1px solid rgba(198,235,232,.11); border-radius: 11px 11px 11px 3px; color: #d5e3e1; background: rgba(255,255,255,.055); font-size: 12px; line-height: 1.55; animation: assistantMessageIn .25s ease both; }
.assistant-message.user { justify-self: end; border-color: rgba(77,225,193,.22); border-radius: 11px 11px 3px 11px; color: #08211f; background: var(--cyan); }
@keyframes assistantMessageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.assistant-progress { padding: 7px 18px 0; color: #718f94; font: 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.assistant-form { display: grid; gap: 9px; padding: 10px 18px 18px; }
.assistant-label { color: #a9c1c1; font-size: 11px; }
.assistant-field { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid rgba(198,235,232,.18); border-radius: 8px; outline: 0; color: white; background: rgba(0,0,0,.2); font: 12px Manrope, sans-serif; }
.assistant-field:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(77,225,193,.1); }
.assistant-field option { color: #092029; background: white; }
.assistant-submit { min-height: 45px; border: 0; border-radius: 8px; color: #06201e; background: linear-gradient(135deg, #8ef3dc, var(--cyan)); font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.assistant-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(77,225,193,.2); }
.assistant-complete { padding: 12px 18px 18px; }
.assistant-complete[hidden] { display: none; }
.assistant-summary { margin: 0 0 12px; color: #a9c1c1; font: 10px/1.65 'DM Mono', monospace; }
.assistant-summary strong { color: var(--cyan); font-weight: 500; }
.assistant-complete-actions { display: grid; gap: 8px; }
.assistant-complete-actions a, .assistant-restart { min-height: 42px; display: grid; place-items: center; border: 1px solid rgba(77,225,193,.28); border-radius: 8px; color: var(--cyan); background: rgba(77,225,193,.06); font-size: 11px; font-weight: 700; cursor: pointer; }
.assistant-complete-actions a:hover, .assistant-restart:hover { border-color: var(--cyan); background: rgba(77,225,193,.14); }
.assistant-restart { width: 100%; margin-top: 8px; border-color: rgba(255,255,255,.13); color: #9db4b6; background: transparent; }
.assistant-inline { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid rgba(77,225,193,.28); border-radius: 8px; color: var(--cyan); background: rgba(77,225,193,.05); font: 600 12px Manrope, sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.assistant-inline:hover { border-color: var(--cyan); background: rgba(77,225,193,.12); }

@media (max-width: 800px) {
  .container { width: min(calc(100% - 40px), var(--max)); }
  .nav { height: 78px; }
  .logo { width: 90px; height: 54px; }
  .links { display: none; position: absolute; top: 78px; right: 0; left: 0; padding: 24px 20px; flex-direction: column; align-items: flex-start; background: rgba(7,19,27,.97); border-bottom: 1px solid var(--line); }
  .links.open { display: flex; }
  .burger { display: block; }
  .hero { min-height: 0; height: auto; padding: 132px 0 58px; }
  .hero-grid { min-height: 0; }
  .hero-bottom { position: relative; left: auto; right: auto; bottom: auto; width: auto; transform: none; margin-top: 42px; padding-top: 16px; }
  .hero-copy { max-width: 100%; padding: 20px 0 20px 20px; }
  .hero-grid > .monitor { display: none; }
  .hero-copy::before { font-size: 9px; }
  .hero-video { object-position: 58% center; opacity: .66; }
  .network-hint { display: none; }
  .hero-grid, .section-head, .proof-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 5.7rem); }
  .hero-lead { font-size: 1rem; line-height: 1.65; margin: 28px 0 30px; }
  .buttons { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .monitor { max-width: 520px; padding: 18px; border-radius: 11px; }
  .hero-bottom { margin-top: 65px; display: block; line-height: 2; }
  .section { padding: 84px 0; }
  .section-head p { font-size: .98rem; }
  .pillars { grid-template-columns: 1fr; gap: 0; margin-top: 60px; }
  .pillar { min-height: 0; padding: 25px; border-right: 1px solid rgba(77,225,193,.3); border-bottom: 0; margin: 0; }
  .pillar h3 { margin-top: 0; }
  .pillar-icon { margin-top: 30px; }
  .diagram { min-height: 420px; margin-top: 55px; }
  .world-header { left: 18px; right: 18px; top: 18px; }
  .world-header strong { font-size: 9px; }
  .world-live { font-size: 9px; }
  .map-svg { inset: 55px 1% 28px; width: 98%; height: calc(100% - 83px); }
  .map-label { font-size: 9px; }
  .map-legend { left: 18px; bottom: 15px; }
  .map-card { transform: scale(.82); transform-origin: left top; }
  .map-card.right { transform-origin: right bottom; }
  .node { width: 145px; padding: 14px; }
  .node b { font-size: 12px; }
  .node small { font-size: 10px; }
  .node.one, .node.three { left: 4%; }
  .node.two, .node.four { right: 4%; }
  .core { width: 150px; height: 112px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 22px 16px; min-height: 130px; }
  .stat strong { font-size: 2.2rem; }
  .contact-line, .footer-line { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .clients { margin-top: 65px; }
  .clients-head { display: block; line-height: 1.8; }
  .client-window { margin-inline: -20px; overflow-x: auto; padding: 0 20px 8px; mask-image: none; }
  .client-track { animation: none; }
  .client { flex-basis: 190px; }
  .client-logo img { max-width: 100%; }
  .client.dell .client-logo img { width: 135px; }
  .client.macro .client-logo img, .client.viventi .client-logo img { width: 125px; }
  .client.paneas .client-logo img { width: 110px; }
  .client.talk .client-logo img { width: 155px; }
}
@media (max-width: 430px) {
  .logo { width: 78px; height: 50px; }
  .hero { padding-top: 132px; }
  .signal { font-size: 10px; }
  .hero h1 { font-size: 3.12rem; }
  .hero-bottom { font-size: 10px; }
  .diagram { min-height: 355px; }
  .world-header strong { font-size: 8px; }
  .world-live { display: none; }
  .map-svg { inset: 52px 0 27px; width: 100%; height: calc(100% - 79px); }
  .map-label { font-size: 8px; }
  .map-legend { font-size: 8px; gap: 10px; }
  .map-card { display: none; }
  .latency-chip { right: 18px; top: 58px; font-size: 8px; }
  .country { stroke-width: .8; }
  .node { width: 130px; }
  .node.one, .node.two { top: 9%; }
  .node.three, .node.four { bottom: 9%; }
  .core { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 800px) { .monitor { animation-name: cardIn; animation-duration: .8s; } }