@font-face {
  font-family: Inter;
  src: url("/assets/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #1b1c1e;
  --muted: #565b60;
  --rule: #e3e5e7;
  --quiet: #f6f7f8;
  --accent: #435d08;
  --accent-soft: #eef8d6;
  --lime: #caff54;
  --dark: #141414;
  --dark-rule: #383934;
  --dark-copy: #c2c4bd;
  --radius: 1.25rem;
  background: #fff;
  color: var(--ink);
  font: 16px/1.55 Inter, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box }
body, h1, h2, h3, p, figure, ol, ul { margin: 0 }
ol, ul { padding: 0; list-style: none }
a { color: inherit; text-decoration: none }
button { color: inherit; font: inherit; cursor: pointer }
svg { width: 1em; height: 1em; flex: none; vertical-align: middle }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }
::selection { background: var(--accent-soft); color: var(--ink) }

.shell { width: min(calc(100% - clamp(2rem, 8vw, 9rem)), 73rem); margin-inline: auto }
.skip { position: fixed; z-index: 5; inset: .75rem auto auto .75rem; padding: .65rem; transform: translateY(-180%); background: #fff }
.skip:focus { transform: none }
.site-header { border-bottom: 1px solid #eff0f1 }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4rem; gap: 1.1rem }
.wordmark { display: inline-flex; align-items: center; gap: .46rem; width: fit-content; font-weight: 750; font-size: 1.05rem; letter-spacing: -.045em; white-space: nowrap }
.wordmark svg { color: var(--accent); font-size: 1.3rem }
.site-nav, .header-actions { display: flex; align-items: center; gap: clamp(.85rem, 2.5vw, 1.9rem); font-size: .85rem }
.site-nav a, .header-actions a:not(.button) { display: flex; align-items: center; min-height: 2.75rem; color: var(--muted) }
.site-nav a:hover, .header-actions a:not(.button):hover { color: var(--accent) }
.header-actions { justify-self: end; gap: .78rem; font-size: .72rem; font-weight: 650 }
.header-actions [aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: .27em }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  width: fit-content;
  min-height: 2.85rem;
  padding: .68rem 1.15rem;
  border-radius: 3rem;
  background: var(--ink);
  color: #fff;
  font-size: .88rem;
  font-weight: 650;
  white-space: nowrap;
}
.button:hover { background: #37393c }
.header-cta { min-height: 2.28rem; margin-left: .34rem; padding: .44rem .85rem; font-size: .78rem }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(1.65rem, 7vw, 6.2rem);
  padding-block: clamp(2.75rem, 4vw, 4rem);
}
h1 { max-width: 17ch; font-size: clamp(2.35rem, 4.35vw, 4.25rem); font-weight: 760; line-height: 1.065; letter-spacing: -.072em }
h1 span {
  display: block;
  width: fit-content;
  margin: .055em 0 0 -.08em;
  padding: .015em .08em .065em;
  border-radius: .075em;
  background: var(--lime);
}
.intro { max-width: 44ch; margin-top: 1.35rem; color: var(--muted); font-size: clamp(1rem, 1.44vw, 1.16rem); line-height: 1.65 }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.15rem; margin-top: 1.5rem }
.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: .86rem; font-weight: 650; text-decoration: underline; text-underline-offset: .25em }
.text-link:hover { color: var(--accent) }

.hero-visual {
  --demo-bg: #f5f5f7;
  --demo-border: #00000014;
  --demo-rule: #0000000d;
  width: min(100%, 520px);
  justify-self: end;
  display: grid;
  gap: 12px;
  line-height: 1.5;
  animation: hero-visual-in .9s cubic-bezier(.25,.46,.45,.94) .1s both;
}
@keyframes hero-visual-in {
  from { opacity: 0; transform: translateY(24px) }
  to { opacity: 1; transform: translateY(0) }
}
.dash-card, .chat-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--demo-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 20px #0000000f, 0 0 0 .5px #00000008;
}
.dash-card { padding: 18px 20px 16px }
.dash-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 16px }
.dash-title, .chat-name { font-size: 12px; font-weight: 600; letter-spacing: -.01em }
.dash-meta { margin-top: 1px; color: #74747a; font-size: 10px }
.dash-dots { display: flex; gap: 4px; flex: none }
.dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f56 }
.dash-dots i:nth-child(2) { background: #ffbd2e }
.dash-dots i:nth-child(3) { background: #27c93f }
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--demo-rule) }
.dash-kpis > div { display: grid; justify-items: start; align-content: start }
.dash-kpis dt { margin-top: 3px; color: #74747a; font-size: 10px }
.dash-kpis dd { margin: 0 }
.dash-kpis .dash-value { grid-row: 1; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -.03em }
.dash-kpis .dash-trend { margin-top: 4px; padding: 2px 5px; border-radius: 4px; background: #34c7591f; color: #157430; font-size: 9px; font-weight: 600 }
.dash-kpis .flat { background: #0000000d; color: #646469 }
.dash-chart svg { display: block; width: 100%; height: 66px }
.dash-line { stroke-dasharray: 1000; animation: hero-chart-line 1.9s cubic-bezier(.4,0,.2,1) .35s both }
.dash-area { animation: hero-chart-area .7s ease 1.9s both }
@keyframes hero-chart-line { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
@keyframes hero-chart-area { from { opacity: 0 } to { opacity: 1 } }
.dash-months { display: flex; justify-content: space-between; padding-top: 4px; color: #74747a; font-size: 9px }
.dash-alerts { position: relative; height: 44px; margin-top: 10px; overflow: hidden }
.dash-alert {
  position: absolute;
  inset: 0 0 auto auto;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--demo-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 16px #00000017, 0 1px 3px #0000000d;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.dash-alert.show { opacity: 1; transform: translateX(0) }
.dash-alert-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; font-size: 10px }
.dash-alert-icon.green { background: #34c75924; color: #157430 }
.dash-alert-icon.blue { background: #007aff1c; color: #004fc4 }
.dash-alert-icon.amber { background: #ff9f0a24; color: #a05e00 }
.dash-alert-title { font-size: 11px; font-weight: 500; line-height: 1.25 }
.dash-alert-detail { margin-top: 1px; color: #74747a; font-size: 9.5px; line-height: 1.2 }
.chat-card { overflow: hidden }
.chat-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--demo-rule); background: var(--demo-bg) }
.chat-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: linear-gradient(145deg,#1d1d1f,#3a3a3a); color: var(--lime) }
.chat-avatar svg { width: 14px; height: 14px }
.chat-name { line-height: 1 }
.chat-connection { display: flex; align-items: center; gap: 4px; margin-top: 1px; color: #157430; font-size: 10px }
.chat-connection::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #34c759 }
.chat-body { display: flex; flex-direction: column; gap: 8px; height: 190px; padding: 12px 14px; overflow: hidden }
.chat-message, .chat-typing { display: flex; flex: none; opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease }
.chat-message.show, .chat-typing.show { opacity: 1; transform: translateY(0) }
.chat-message.user { justify-content: end }
.chat-bubble { max-width: 88%; padding: 6px 11px; border-radius: 13px; background: var(--demo-bg); font-size: 12px; line-height: 1.45 }
.chat-message.assistant .chat-bubble { border-bottom-left-radius: 3px }
.chat-message.user .chat-bubble { border-bottom-right-radius: 3px; background: var(--ink); color: #fff }
.chat-typing span { display: inline-flex; align-items: center; gap: 3px; padding: 9px 12px; border-radius: 13px 13px 13px 3px; background: var(--demo-bg) }
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: #aeaeb2; animation: hero-typing 1.1s ease infinite }
.chat-typing i:nth-child(2) { animation-delay: .18s }
.chat-typing i:nth-child(3) { animation-delay: .36s }
@keyframes hero-typing { 0%, 55%, 100% { transform: translateY(0) } 28% { transform: translateY(-4px) } }

.section { padding-block: clamp(3rem, 6.7vw, 5.8rem) }
.services-section { background: var(--dark); color: white }
.process-section { background: var(--quiet); border-block: 1px solid #eff0f1 }
h2 { max-width: 24ch; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 740; letter-spacing: -.06em; line-height: 1.11 }
.section-intro, .contact p { margin-top: .72rem; color: var(--muted) }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.75rem; border: 1px solid var(--dark-rule); border-radius: var(--radius); overflow: hidden; background: var(--dark-rule) }
.service { min-width: 0; padding: clamp(1.15rem, 2.7vw, 2.1rem); background: #191919 }
.service-number { display: inline-block; margin-bottom: .46rem; color: var(--lime); font-size: .78rem; font-weight: 720; font-variant-numeric: tabular-nums }
h3 { font-size: clamp(1.06rem, 1.82vw, 1.4rem); font-weight: 720; letter-spacing: -.038em; line-height: 1.26 }
.service p, .project p, .process-list p { margin-top: .48rem; max-width: 53ch; color: var(--muted); font-size: .94rem }
.services-section :is(.section-intro, .service p) { color: var(--dark-copy) }
.service-items { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .92rem; font-size: .8rem; color: #e4e5e2; line-height: 1.45 }
.service-items li { display: flex; align-items: baseline; gap: .42rem }
.service-items li::before { content: ""; display: inline-block; flex: none; width: .25rem; height: .25rem; background: var(--lime); border-radius: 50%; transform: translateY(-.12rem) }

.integration-heading { margin-bottom: 1.6rem }
.integration-heading p { max-width: 65ch }
.flow-panel { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff }
.flow-graph { position: relative; width: min(100% - 2rem, 63rem); margin-inline: auto; aspect-ratio: 1000 / 326 }
.flow-geometry { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible }
.flow-narrow { display: none }
.flow-track, .flow-geometry marker path { fill: none; stroke: #687b55; stroke-linecap: round; stroke-linejoin: round }
.flow-track { stroke-width: 1.55; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke }
.flow-geometry marker path { stroke-width: 1.45 }
.flow-pulse {
  fill: none;
  stroke: #83b716;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 11 100;
  stroke-dashoffset: 11;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation: integration-pulse 3.15s var(--delay) linear infinite both;
}
[data-route$="-to-program"]:not([data-route="sales-to-program"]) .flow-pulse { stroke: #4e811a }
@keyframes integration-pulse {
  0% { stroke-dashoffset: 11; opacity: 0 }
  2% { opacity: 1 }
  49% { stroke-dashoffset: -100; opacity: 1 }
  50%, 100% { stroke-dashoffset: -100; opacity: 0 }
}
.flow-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.4rem, 1vw, .72rem);
  width: 17%;
  height: clamp(3rem, 20%, 4.25rem);
  padding: .5rem .35rem;
  transform: translate(-50%, -50%);
  border: 1px solid #dcdfe1;
  border-radius: .85rem;
  background: #fff;
  font-size: clamp(.74rem, 1.16vw, .93rem);
  font-weight: 680;
  line-height: 1.2;
  box-shadow: 0 4px 12px #19231a09;
}
.flow-node img { display: block; flex: none; object-fit: contain }
.flow-sap, .flow-holded { left: 13.5% }
.flow-sap { top: 18.71% }
.flow-sales { left: 13.5%; top: 50% }
.flow-holded { top: 81.29% }
.flow-program { left: 48%; top: 50%; width: 22%; border-color: #a8c567; background: #f8fceb }
.program-mark { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .5rem; background: var(--lime); color: var(--ink) }
.program-mark svg { width: 1.2rem; height: 1.2rem }
.flow-gmail { left: 83.5%; top: 27.61% }
.flow-whatsapp { left: 83.5%; top: 74.54% }
.integrations + #work { padding-top: 0 }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem clamp(1rem, 3vw, 2.25rem); margin-top: 1.65rem }
.project { border-top: 1px solid var(--rule); padding-top: 1rem }
.project-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .78rem }
.project-tags li { padding: .25rem .58rem; border-radius: 1.25rem; background: var(--quiet); color: var(--muted); font-size: .73rem }
.process-list {
  --step-rise: 1.5rem;
  --step-rule: #444c3a;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin-top: 1.9rem;
}
.process-list li {
  position: relative;
  min-width: 0;
  margin-top: calc(var(--rise) * var(--step-rise));
  padding: .9rem clamp(.7rem, 1.6vw, 1.3rem) 0;
  border-top: 1px solid var(--step-rule);
}
.process-list li + li::before {
  position: absolute;
  inset: -1px auto auto 0;
  height: var(--step-rise);
  border-left: 1px solid var(--step-rule);
  content: "";
}
.process-number {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  min-height: 1.45rem;
  margin-bottom: .52rem;
  border-radius: .3rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .7rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}
.process-list li:first-child .process-number { background: var(--lime); color: var(--ink) }
.process-list p { margin-top: .35rem }
.care-note { margin-top: 1.65rem; padding-top: .85rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .87rem }
.contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.25rem }
.footer { border-top: 1px solid var(--rule) }
.footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 4.4rem; gap: .5rem; padding-block: .7rem; font-size: .82rem }
.footer a:not(.wordmark) { color: var(--muted) }
.footer a:hover { color: var(--accent) }

@media (max-width: 900px) {
  .hero { gap: 2rem }
  .header-inner { grid-template-columns: 1fr auto }
  .site-nav { display: none }
}

@media (max-width: 800px) {
  .flow-graph { width: min(100% - 1.25rem, 23rem); aspect-ratio: 360 / 422 }
  .flow-wide { display: none }
  .flow-narrow { display: block }
  .flow-node { height: 12.3%; padding-block: .25rem; width: 43%; font-size: .81rem }
  .flow-sales { left: 50%; top: 8.29%; width: 53% }
  .flow-sap { left: 25%; top: 30.09% }
  .flow-holded { left: 75%; top: 30.09% }
  .flow-program { left: 50%; top: 59.72%; width: 62% }
  .flow-gmail { left: 25%; top: 90.52% }
  .flow-whatsapp { left: 75%; top: 90.52% }
  .flow-node img { max-height: 1.55rem }
}

@media (max-width: 680px) {
  .process-list { grid-template-columns: 1fr; gap: .75rem; margin-top: 1.2rem }
  .process-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    margin-top: 0;
    padding: .75rem 0 0;
    border-top-color: var(--rule);
  }
  .process-list li + li::before { display: none }
  .process-number { margin: 0 }
  .hero { grid-template-columns: 1fr; padding-block: 2.45rem }
  .intro { margin-top: .84rem }
  .actions { margin-top: 1rem }
  .hero h1 { max-width: 15ch }
  .service-grid, .project-grid { grid-template-columns: 1fr }
  .hero-visual { justify-self: stretch; margin-inline: auto }
}

@media (max-width: 390px) {
  .header-cta { display: none }
}