:root {
  --bg: #070812;
  --surface: #0e1020;
  --surface-2: #141629;
  --line: rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.065);
  --text: #f5f4fa;
  --muted: #a7a6b3;
  --violet: #8b5cf6;
  --violet-light: #b59aff;
  --blue: #3887ff;
  --cyan: #55d8ff;
  --green: #34e07c;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(circle at 70% 0%, rgba(92,44,180,.17), transparent 34%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }

.site-header { width: min(calc(100% - 48px), var(--max)); height: 88px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { display: block; width: 178px; height: 48px; overflow: hidden; }
.brand img, .footer-brand img { width: 100%; height: 100%; object-fit: contain; }
nav { display: flex; gap: 38px; font-size: .94rem; color: #cbc9d3; }
nav a { transition: color .25s ease; }
nav a:hover { color: #fff; }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .9rem; transition: .3s ease; }
.header-cta span { display: grid; place-items: center; width: 27px; height: 27px; background: var(--violet); border-radius: 50%; }
.header-cta:hover { border-color: var(--violet); transform: translateY(-2px); }
.menu-button { display: none; color: #fff; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; }

.hero { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; min-height: 750px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 38px; position: relative; padding: 70px 0 86px; }
.hero-glow { position: absolute; filter: blur(110px); border-radius: 50%; pointer-events: none; opacity: .35; }
.glow-one { width: 260px; height: 260px; background: var(--violet); left: -160px; top: 120px; }
.glow-two { width: 320px; height: 320px; background: #153eaa; right: -180px; bottom: 20px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #bfbdc9; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 24px; }
.eyebrow span { width: 9px; height: 9px; border: 2px solid var(--violet-light); border-radius: 50%; box-shadow: 0 0 15px var(--violet); }
h1, h2, h3 { font-family: "Manrope", sans-serif; margin: 0; }
h1 { font-size: clamp(4rem, 7.1vw, 7.25rem); line-height: .91; letter-spacing: -.075em; max-width: 720px; }
h1 em, h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #fff 10%, var(--violet-light) 52%, var(--cyan)); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { color: var(--muted); font-size: 1.12rem; line-height: 1.7; max-width: 600px; margin: 28px 0 32px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 0 10px 0 24px; border-radius: 999px; font-weight: 700; border: 0; transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
.button-primary { background: #f4f2f8; color: #090a12; box-shadow: 0 12px 38px rgba(0,0,0,.28); }
.button:hover { transform: translateY(-3px); box-shadow: 0 16px 45px rgba(89,59,255,.28); }
.button-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: white; font-size: 1.1rem; }
.text-link { color: #ccc9d5; font-weight: 600; border-bottom: 1px solid var(--line); padding: 11px 0; }
.text-link span { margin-left: 7px; color: var(--violet-light); }
.trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 46px; color: #817f8d; text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; font-weight: 700; }
.trust-row i { width: 3px; height: 3px; background: #53515c; border-radius: 50%; }

.automation-stage { position: relative; height: 610px; border: 1px solid rgba(168,134,255,.23); border-radius: 28px; overflow: hidden; background: linear-gradient(145deg, rgba(24,18,49,.77), rgba(7,8,18,.75) 58%), radial-gradient(circle at 60% 44%, rgba(92,52,197,.21), transparent 38%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 45px 90px rgba(0,0,0,.35); perspective: 900px; }
.automation-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.stage-topbar { position: absolute; z-index: 4; left: 22px; right: 22px; top: 20px; display: flex; align-items: center; gap: 10px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; color: #c4c1cd; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.stage-hint { margin-left: auto; color: #6f6c79; font-weight: 500; letter-spacing: .02em; text-transform: none; }
#networkCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; z-index: 2; touch-action: none; }
#networkCanvas:active { cursor: grabbing; }
.node-detail { position: absolute; z-index: 5; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 12px; padding: 10px 15px 10px 10px; border-radius: 14px; background: rgba(8,9,19,.72); border: 1px solid var(--line); backdrop-filter: blur(12px); transition: .2s ease; }
.node-detail > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(139,92,246,.18); color: var(--violet-light); }
.node-detail div { display: grid; gap: 3px; }
.node-detail small { font-size: .52rem; letter-spacing: .13em; color: #74717e; }
.node-detail strong { font-size: .86rem; }
.stage-orbit { position: absolute; z-index: 1; border: 1px solid rgba(139,92,246,.09); border-radius: 50%; pointer-events: none; }
.orbit-a { width: 410px; height: 410px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateX(68deg); }
.orbit-b { width: 540px; height: 260px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-25deg); }

.metric-strip { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 132px; display: grid; grid-template-columns: repeat(3, 1fr) 1.35fr; align-items: center; }
.metric-strip > div { display: flex; align-items: center; gap: 16px; }
.metric-strip strong { font: 700 2rem "Manrope"; color: #3c3947; }
.metric-strip span { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.metric-strip p { color: var(--muted); line-height: 1.5; border-left: 1px solid var(--line); padding-left: 32px; }

.solutions, .method { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 150px 0; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; margin-bottom: 68px; }
.section-index { display: block; color: var(--violet-light); font-weight: 700; letter-spacing: .15em; font-size: .7rem; margin-bottom: 20px; }
.section-heading h2, .integration-copy h2 { font-size: clamp(3rem, 5vw, 5.8rem); line-height: .97; letter-spacing: -.06em; }
.section-heading > p, .integration-copy > p { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin: 0; max-width: 500px; }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.service-card { position: relative; min-height: 470px; background: linear-gradient(150deg, rgba(21,23,43,.82), rgba(10,11,22,.88)); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; padding: 30px; display: flex; flex-direction: column; transition: border-color .35s ease, transform .35s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(139,92,246,.42); }
.service-featured { background: radial-gradient(circle at 65% 30%, rgba(57,116,255,.18), transparent 35%), linear-gradient(150deg, rgba(20,23,47,.9), rgba(10,11,22,.9)); }
.card-number { position: absolute; right: 28px; top: 24px; color: #4c4958; font: 700 .8rem "Manrope"; }
.card-copy { margin-top: auto; position: relative; z-index: 2; }
.card-kicker { display: block; color: var(--violet-light); font-size: .64rem; letter-spacing: .15em; font-weight: 700; margin-bottom: 11px; }
.card-copy h3 { font-size: 1.85rem; letter-spacing: -.035em; margin-bottom: 12px; }
.card-copy p { color: var(--muted); line-height: 1.65; margin: 0; max-width: 510px; }
.card-visual { position: absolute; left: 24px; right: 24px; top: 30px; height: 255px; display: grid; place-items: center; }
.ui-shell { width: 77%; height: 195px; padding: 17px; transform: perspective(800px) rotateX(10deg) rotateY(-12deg) rotateZ(1deg); background: rgba(14,17,35,.88); border: 1px solid rgba(121,157,255,.25); border-radius: 16px; box-shadow: 25px 25px 55px rgba(0,0,0,.35), -8px -8px 30px rgba(88,107,255,.07); animation: float 5s ease-in-out infinite; }
.ui-nav { display: flex; gap: 5px; }
.ui-nav i { width: 6px; height: 6px; background: #5e5c6b; border-radius: 50%; }.ui-nav i:first-child { background: var(--violet); }
.ui-data { height: 92px; display: flex; align-items: flex-end; gap: 11px; padding: 20px 12px 0; }
.ui-data span { flex: 1; height: var(--h); background: linear-gradient(to top, rgba(57,134,255,.25), #7264f5); border-radius: 5px 5px 2px 2px; }
.ui-line { height: 27px; margin: 14px 12px; border-top: 1px solid #2d3045; border-bottom: 1px solid #2d3045; }
.flow-visual { display: flex; gap: 14px; align-items: center; justify-content: center; }
.flow-node { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font: 700 .85rem "Manrope"; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.fn-main { width: 86px; height: 86px; background: linear-gradient(145deg, #8850e9, #5a38bb); border-color: #ad86ff; font-size: 1.1rem; transform: translateY(-12px) rotate(-5deg); box-shadow: 0 18px 45px rgba(109,62,217,.35); }
.flow-visual > span { width: 55px; height: 1px; background: linear-gradient(90deg, #403d4d, var(--violet)); position: relative; }
.flow-visual > span::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-light); box-shadow: 0 0 12px var(--violet); animation: pulse 1.8s ease-in-out infinite; }
.ai-core { width: 105px; height: 105px; display: grid; place-items: center; border-radius: 32%; background: radial-gradient(circle at 35% 25%, #c7b1ff, #7554e8 48%, #3e268a); font: 800 1.6rem "Manrope"; box-shadow: 0 0 70px rgba(126,86,240,.45); animation: breathe 4s ease-in-out infinite; }
.ai-dot { position: absolute; width: 11px; height: 11px; background: #8f72ec; border: 2px solid #c7baff; border-radius: 50%; box-shadow: 0 0 18px #8b5cf6; }.d1{left:20%;top:28%}.d2{right:22%;top:22%}.d3{left:27%;bottom:17%}.d4{right:17%;bottom:28%}
.ai-visual::before, .ai-visual::after { content: ""; position: absolute; width: 190px; height: 80px; border: 1px solid rgba(149,111,255,.2); border-radius: 50%; transform: rotate(25deg); }.ai-visual::after{transform:rotate(-35deg);width:220px}
.web-window { width: 78%; height: 185px; border: 1px solid rgba(93,122,255,.27); border-radius: 16px; background: linear-gradient(135deg, #161933, #0b0d1b); transform: perspective(700px) rotateY(12deg) rotateX(5deg); padding: 14px; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 14px 1fr 10px; gap: 10px; box-shadow: -25px 20px 50px rgba(0,0,0,.3); }
.web-window > span { grid-column: 1/-1; width: 45px; border-top: 4px dotted #4c4b5c; }
.web-window strong { grid-row: 2; display: grid; place-items: center; font: 800 4.5rem "Manrope"; color: #9d7aff; background: rgba(139,92,246,.08); border-radius: 9px; }
.web-window i { display: block; background: linear-gradient(90deg, #29304f, #6e54ce); border-radius: 8px; }.web-window i:last-child { opacity:.5 }

.integration-section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto 20px; min-height: 670px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 65px; align-items: center; padding: 84px 65px; border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(circle at 75% 45%, rgba(68,53,164,.18), transparent 33%), #0b0c17; }
.integration-copy h2 { margin-bottom: 24px; }
.integration-copy ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 13px; color: #c5c3cd; }
.integration-copy li { display: flex; align-items: center; gap: 10px; }.integration-copy li span{color:var(--green)}
.integration-board { height: 440px; position: relative; border: 1px solid var(--line-soft); border-radius: 20px; background: rgba(6,7,15,.68); overflow: hidden; }
.integration-board::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:24px 24px; mask-image:radial-gradient(circle,black,transparent 78%); }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }.flow-lines path{fill:none;stroke:rgba(139,92,246,.42);stroke-width:1.5;stroke-dasharray:5 7;animation:dash 12s linear infinite}
.ib-node { position: absolute; width: 145px; min-height: 84px; padding: 13px 14px; border-radius: 14px; background: rgba(20,22,41,.96); border: 1px solid var(--line); display: grid; gap: 3px; box-shadow: 0 15px 35px rgba(0,0,0,.28); }
.ib-node small { color: #6f6c7b; font-size: .52rem; letter-spacing: .12em; }.ib-node strong{font:700 1.05rem "Manrope"}.ib-node span{color:#8d8b98;font-size:.67rem}
.source-node { left: 30px; top: 50%; transform: translateY(-50%); border-color: rgba(52,224,124,.28); }.hub-node{left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#6041bc,#342569);border-color:#9b77ef;box-shadow:0 15px 45px rgba(112,67,220,.32)}
.target{right:28px}.t1{top:38px}.t2{top:50%;transform:translateY(-50%)}.t3{bottom:38px}

.method-steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.method-steps article { min-height: 260px; padding: 26px 26px 28px 0; border-right: 1px solid var(--line); }
.method-steps article:not(:first-child){padding-left:26px}.method-steps article:last-child{border-right:0}
.method-steps span { display: block; color: var(--violet-light); font-size: .72rem; font-weight: 700; margin-bottom: 62px; }
.method-steps h3 { font-size: 1.35rem; margin-bottom: 12px; }.method-steps p{color:var(--muted);line-height:1.6;margin:0;font-size:.92rem}

.contact { width: min(calc(100% - 48px), var(--max)); margin: 0 auto 40px; min-height: 620px; padding: 80px; display: grid; grid-template-columns: 1fr .78fr; gap: 80px; align-items: center; position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(135deg, #6338d0 0%, #392080 48%, #151432 100%); }
.contact::before { content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.1);border-radius:50%;left:-240px;bottom:-330px;box-shadow:0 0 0 85px rgba(255,255,255,.025),0 0 0 170px rgba(255,255,255,.018)}
.contact-glow { position:absolute;width:280px;height:280px;background:#579bff;filter:blur(120px);opacity:.27;right:10%;top:-120px; }
.contact-copy { position:relative;z-index:2 }.contact .section-index{color:#d9ccff}.contact h2{font-size:clamp(3.1rem,5.4vw,6rem);line-height:.98;letter-spacing:-.06em}.contact h2 em{color:#b8efff}.contact-copy p{font-size:1.05rem;line-height:1.6;color:#d5caec;max-width:560px}
.contact-builder { position:relative;z-index:2;background:rgba(9,9,22,.7);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:28px;backdrop-filter:blur(20px);box-shadow:0 30px 70px rgba(0,0,0,.28) }
.builder-label,.contact-builder label{display:block;font-size:.63rem;letter-spacing:.14em;font-weight:700;color:#9893a7;margin-bottom:13px}
.choice-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.choice{border:1px solid var(--line);color:#bbb8c5;background:rgba(255,255,255,.035);border-radius:999px;padding:9px 13px;font-size:.78rem;cursor:pointer;transition:.2s}.choice.active,.choice:hover{background:rgba(139,92,246,.26);border-color:#8f6be5;color:#fff}
.contact-builder textarea{width:100%;resize:vertical;min-height:98px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.2);color:#fff;padding:14px;outline:0;line-height:1.5;margin-bottom:15px}.contact-builder textarea:focus{border-color:var(--violet-light)}
.button-whatsapp{width:100%;background:#31d56f;color:#06140b;padding-left:20px}.button-whatsapp .button-icon{margin-left:auto;background:rgba(0,0,0,.18)}.wa-mark{font-size:1.1rem}.contact-builder>small{display:block;text-align:center;color:#777381;margin-top:12px}

footer { width: min(calc(100% - 48px), var(--max)); min-height: 150px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; border-top:1px solid var(--line);color:#777583;font-size:.78rem}.footer-brand{width:145px;height:42px;overflow:hidden}footer>div{display:flex;justify-content:flex-end;gap:24px}
.floating-wa{position:fixed;right:24px;bottom:24px;z-index:15;width:57px;height:57px;border-radius:50%;display:grid;place-items:center;background:#31d56f;color:#06140b;box-shadow:0 15px 35px rgba(0,0,0,.35),0 0 0 7px rgba(49,213,111,.08);transition:.25s}.floating-wa:hover{transform:scale(1.08) translateY(-2px)}.floating-wa svg{width:29px;height:29px;fill:currentColor}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:none}
@keyframes float{50%{transform:perspective(800px) rotateX(10deg) rotateY(-12deg) rotateZ(1deg) translateY(-9px)}}
@keyframes pulse{50%{opacity:.25;transform:scale(.6)}}
@keyframes breathe{50%{transform:scale(1.05) rotate(3deg);box-shadow:0 0 90px rgba(126,86,240,.55)}}
@keyframes dash{to{stroke-dashoffset:-240}}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr; padding-top:70px}.hero-copy{max-width:760px}.automation-stage{height:560px}.metric-strip{grid-template-columns:repeat(3,1fr)}.metric-strip p{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:22px 0;margin:0}.integration-section{grid-template-columns:1fr;padding:65px 38px}.integration-copy{max-width:650px}.contact{grid-template-columns:1fr;padding:65px}.contact-copy{max-width:800px}
}
@media(max-width:760px){
  .site-header{width:calc(100% - 32px);height:76px;grid-template-columns:1fr auto}.brand{width:145px;height:42px}nav{display:none;position:absolute;left:0;right:0;top:75px;flex-direction:column;background:#0b0c17;border:1px solid var(--line);padding:22px;border-radius:14px;gap:18px}.site-header.menu-open nav{display:flex}.header-cta{display:none}.menu-button{display:block}
  .hero,.solutions,.method,.integration-section,.contact,footer,.metric-strip{width:calc(100% - 32px)}.hero{min-height:auto;padding:62px 0 70px}.hero-copy>p{font-size:1rem}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.trust-row{margin-top:32px}.automation-stage{height:460px;border-radius:20px}.stage-hint{display:none}.node-detail{left:14px;bottom:14px}.metric-strip{grid-template-columns:1fr;padding:12px 0}.metric-strip>div{padding:15px 0;border-bottom:1px solid var(--line-soft)}.metric-strip p{grid-column:auto;border-top:0;padding:18px 0}.solutions,.method{padding:105px 0}.section-heading{grid-template-columns:1fr;gap:25px;margin-bottom:45px}.section-heading h2,.integration-copy h2{font-size:clamp(2.7rem,13vw,4.2rem)}.service-grid{grid-template-columns:1fr}.service-card{min-height:450px;padding:24px}.card-visual{left:12px;right:12px}.integration-section{padding:58px 20px;gap:42px}.integration-board{height:520px}.flow-lines{display:none}.ib-node{width:132px}.source-node{left:15px;top:50%}.hub-node{left:auto;right:15px;top:50%}.target{right:auto;left:50%;transform:translateX(-50%)}.t1{top:25px}.t2{display:none}.t3{bottom:25px}.method-steps{grid-template-columns:1fr}.method-steps article,.method-steps article:not(:first-child){min-height:auto;padding:25px 0;border-right:0;border-bottom:1px solid var(--line)}.method-steps span{margin-bottom:25px}.contact{padding:54px 20px;gap:42px;border-radius:24px}.contact h2{font-size:clamp(2.8rem,13vw,4.4rem)}.contact-builder{padding:20px}footer{grid-template-columns:1fr;padding:35px 0;gap:16px}footer>p{margin:0}footer>div{justify-content:flex-start;flex-wrap:wrap}.floating-wa{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.ui-shell,.ai-core,.flow-visual>span::after,.flow-lines path{animation:none!important}}