/* ============================================
   WF AtendCanais — Landing Page Styles
   Atendimento e CX
   ============================================ */

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.ac-hero{position:relative;min-height:100vh;display:flex;align-items:center;
  padding-top:80px;overflow:hidden}

.ac-hero__bg{position:absolute;inset:0;overflow:hidden}
.ac-hero__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.ac-hero__orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.ac-hero__orb--1{width:600px;height:600px;top:-15%;right:-8%;
  background:radial-gradient(circle,rgba(6,182,212,0.14),transparent 70%);
  animation:ac-drift-1 22s ease-in-out infinite}
.ac-hero__orb--2{width:500px;height:500px;bottom:-10%;left:-5%;
  background:radial-gradient(circle,rgba(99,102,241,0.12),transparent 70%);
  animation:ac-drift-2 26s ease-in-out infinite}
.ac-hero__orb--3{width:400px;height:400px;top:35%;left:30%;
  background:radial-gradient(circle,rgba(16,185,129,0.08),transparent 70%);
  animation:ac-drift-3 20s ease-in-out infinite}

@keyframes ac-drift-1{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,40px)}}
@keyframes ac-drift-2{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes ac-drift-3{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-40px)}}

.ac-hero__inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:4rem;align-items:center}

.ac-hero__title{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:800;
  letter-spacing:-0.04em;line-height:1.08;margin-bottom:1.5rem;margin-top:1.5rem}

.ac-hero__desc{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--wf-text-2);
  line-height:1.7;max-width:560px;margin-bottom:2.5rem}

.ac-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* KPI Cards */
.ac-hero__kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.ac-kpi{background:var(--wf-bg-card);border:1px solid var(--wf-border);
  border-radius:var(--wf-r-xl);padding:1.5rem;text-align:center;
  transition:all 400ms var(--wf-ease);position:relative;overflow:hidden}
.ac-kpi::before{content:'';position:absolute;inset:0;
  background:var(--wf-grad-glow);opacity:0;transition:opacity 400ms;pointer-events:none}
.ac-kpi:hover{border-color:var(--wf-border-hover);transform:translateY(-4px)}
.ac-kpi:hover::before{opacity:1}

.ac-kpi__icon{font-size:1.5rem;color:var(--wf-cyan-light);margin-bottom:0.5rem}
.ac-kpi__value{font-family:var(--wf-display);font-size:2rem;font-weight:800;
  color:var(--wf-text-1);letter-spacing:-0.03em}
.ac-kpi__label{font-size:12px;color:var(--wf-text-3);margin-top:4px;line-height:1.4}


/* ═══════════════════════════════════════════
   MATURITY BADGE
   ═══════════════════════════════════════════ */
.ac-maturity__card{display:flex;align-items:center;gap:1.5rem;
  background:var(--wf-bg-card);border:1px solid var(--wf-border);
  border-radius:var(--wf-r-xl);padding:2rem 2.5rem;
  position:relative;overflow:hidden}
.ac-maturity__card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--wf-cyan),var(--wf-primary),var(--wf-emerald));opacity:0.6}
.ac-maturity__icon{width:56px;height:56px;border-radius:var(--wf-r-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  background:rgba(6,182,212,0.1);color:var(--wf-cyan-light);
  border:1px solid rgba(6,182,212,0.15)}
.ac-maturity__content h3{font-size:1.2rem;font-weight:700;margin-bottom:0.4rem}
.ac-maturity__content p{font-size:14px;color:var(--wf-text-2);line-height:1.7}


/* ═══════════════════════════════════════════
   PROBLEMS
   ═══════════════════════════════════════════ */
.ac-problems__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

.ac-problem{text-align:center}
.ac-problem h3{font-size:1rem;margin-bottom:0.5rem}
.ac-problem p{font-size:13px;color:var(--wf-text-3);line-height:1.6}
.ac-problem__icon{width:48px;height:48px;border-radius:var(--wf-r-md);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
  font-size:1.3rem;color:var(--wf-rose);
  background:rgba(244,63,94,0.08);border:1px solid rgba(244,63,94,0.12)}


/* ═══════════════════════════════════════════
   MODULES OVERVIEW (2 cards + bridge)
   ═══════════════════════════════════════════ */
.ac-modules-overview{display:flex;align-items:stretch;gap:0}

.ac-module-card{flex:1;padding:2.5rem;border-radius:var(--wf-r-xl);
  background:var(--wf-bg-card);border:1px solid var(--wf-border);
  transition:all 400ms var(--wf-ease);position:relative;overflow:hidden}
.ac-module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0.5}
.ac-module-card--cyan::before{background:linear-gradient(90deg,var(--wf-cyan),var(--wf-emerald))}
.ac-module-card--indigo::before{background:linear-gradient(90deg,var(--wf-primary),var(--wf-violet))}
.ac-module-card:hover{border-color:var(--wf-border-hover);transform:translateY(-4px)}

.ac-module-card__icon{font-size:2.5rem;margin-bottom:1rem}
.ac-module-card--cyan .ac-module-card__icon{color:var(--wf-cyan-light)}
.ac-module-card--indigo .ac-module-card__icon{color:var(--wf-primary-light)}
.ac-module-card h3{font-size:1.3rem;font-weight:700;margin-bottom:0.5rem}
.ac-module-card p{font-size:14px;color:var(--wf-text-2);line-height:1.6;margin-bottom:1.25rem}

.ac-module-card__link{font-size:14px;font-weight:600;display:inline-flex;align-items:center;
  gap:6px;transition:color 200ms}
.ac-module-card--cyan .ac-module-card__link{color:var(--wf-cyan-light)}
.ac-module-card--indigo .ac-module-card__link{color:var(--wf-primary-light)}
.ac-module-card__link:hover{opacity:0.8}

/* Bridge */
.ac-module-card__bridge{display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:0 1rem;gap:8px;flex-shrink:0}
.ac-module-card__bridge-line{width:2px;height:30px;
  background:linear-gradient(180deg,var(--wf-cyan),var(--wf-primary));opacity:0.3}
.ac-module-card__bridge-icon{width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:var(--wf-bg-card);border:1px solid var(--wf-border);color:var(--wf-text-2)}


/* ═══════════════════════════════════════════
   FEATURE BLOCKS
   ═══════════════════════════════════════════ */
.ac-feature-block{padding:2.5rem;margin-bottom:1.5rem}
.ac-feature-block__header{display:flex;align-items:center;gap:16px;margin-bottom:1.5rem}
.ac-feature-block__title{font-size:1.3rem;font-weight:700}
.ac-feature-block__sub{font-size:13px;color:var(--wf-text-3);margin-top:2px}

.ac-badge{width:48px;height:48px;border-radius:var(--wf-r-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.ac-badge--cyan{background:rgba(6,182,212,0.1);color:var(--wf-cyan-light);
  border:1px solid rgba(6,182,212,0.15)}
.ac-badge--emerald{background:rgba(16,185,129,0.1);color:var(--wf-emerald-light);
  border:1px solid rgba(16,185,129,0.15)}
.ac-badge--indigo{background:rgba(99,102,241,0.1);color:var(--wf-primary-light);
  border:1px solid rgba(99,102,241,0.15)}
.ac-badge--violet{background:rgba(139,92,246,0.1);color:#a78bfa;
  border:1px solid rgba(139,92,246,0.15)}

/* Feature Grid */
.ac-features__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.ac-features__grid--2col{grid-template-columns:repeat(2,1fr)}

.ac-feature{padding:1.25rem;border-radius:var(--wf-r-lg);
  background:rgba(255,255,255,0.02);border:1px solid var(--wf-border);
  transition:all 300ms var(--wf-ease)}
.ac-feature:hover{border-color:var(--wf-border-hover);background:rgba(255,255,255,0.04)}

.ac-feature h4{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--wf-text-1)}
.ac-feature p{font-size:13px;color:var(--wf-text-3);line-height:1.6}

.ac-feature__icon{width:36px;height:36px;border-radius:var(--wf-r-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:0.75rem}
.ac-feature__icon--cyan{background:rgba(6,182,212,0.1);color:var(--wf-cyan-light)}
.ac-feature__icon--emerald{background:rgba(16,185,129,0.1);color:var(--wf-emerald-light)}
.ac-feature__icon--indigo{background:rgba(99,102,241,0.1);color:var(--wf-primary-light)}
.ac-feature__icon--violet{background:rgba(139,92,246,0.1);color:#a78bfa}
.ac-feature__icon--amber{background:rgba(245,158,11,0.1);color:#fbbf24}
.ac-feature__icon--rose{background:rgba(244,63,94,0.1);color:#fb7185}


/* ═══════════════════════════════════════════
   HANDOFF FLOW
   ═══════════════════════════════════════════ */
.ac-handoff__flow{display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;padding:1.5rem 2rem;border-radius:var(--wf-r-lg);
  background:rgba(255,255,255,0.015);border:1px solid var(--wf-border);margin-bottom:1.5rem}

.ac-handoff__step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:100px}
.ac-handoff__step span{font-size:12px;color:var(--wf-text-2);text-align:center;line-height:1.3}

.ac-handoff__step-icon{width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  background:var(--wf-bg-card);border:2px solid var(--wf-border);
  transition:all 400ms var(--wf-ease)}
.ac-handoff__step-icon--1{border-color:rgba(6,182,212,0.3);color:var(--wf-cyan-light)}
.ac-handoff__step-icon--2{border-color:rgba(245,158,11,0.3);color:#fbbf24}
.ac-handoff__step-icon--3{border-color:rgba(99,102,241,0.3);color:var(--wf-primary-light)}
.ac-handoff__step-icon--4{border-color:rgba(16,185,129,0.3);color:var(--wf-emerald-light)}

.ac-handoff__arrow{color:var(--wf-text-3);font-size:14px;flex-shrink:0}

.ac-handoff__details{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}


/* ═══════════════════════════════════════════
   OMNICHANNEL JOURNEYS
   ═══════════════════════════════════════════ */
.ac-journeys__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}

.ac-journey{padding:2rem;position:relative}
.ac-journey__number{font-family:var(--wf-display);font-size:2.5rem;font-weight:800;
  background:var(--wf-grad-text);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  opacity:0.3;margin-bottom:0.75rem;line-height:1}
.ac-journey h4{font-size:1rem;font-weight:700;margin-bottom:0.5rem}
.ac-journey p{font-size:13px;color:var(--wf-text-2);line-height:1.6;margin-bottom:1rem}

.ac-journey__tags{display:flex;gap:6px}
.ac-journey__tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px;
  text-transform:uppercase;letter-spacing:0.04em}
.ac-journey__tag--cyan{background:rgba(6,182,212,0.1);color:var(--wf-cyan-light);
  border:1px solid rgba(6,182,212,0.2)}
.ac-journey__tag--indigo{background:rgba(99,102,241,0.1);color:var(--wf-primary-light);
  border:1px solid rgba(99,102,241,0.2)}
.ac-journey__tag--emerald{background:rgba(16,185,129,0.1);color:var(--wf-emerald-light);
  border:1px solid rgba(16,185,129,0.2)}
.ac-journey__tag--violet{background:rgba(139,92,246,0.1);color:#a78bfa;
  border:1px solid rgba(139,92,246,0.2)}


/* ═══════════════════════════════════════════
   RESULTS
   ═══════════════════════════════════════════ */
.ac-results{background:var(--wf-bg-card);border:1px solid var(--wf-border);
  border-radius:var(--wf-r-xl);padding:3rem;text-align:center}
.ac-results__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}

.ac-result{padding:1rem}
.ac-result__value{font-family:var(--wf-display);font-size:1.8rem;font-weight:800;
  background:var(--wf-grad-text);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.03em}
.ac-result__label{font-size:12px;color:var(--wf-text-3);margin-top:6px;line-height:1.4}


/* ═══════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════ */
.ac-cta{position:relative;border-radius:var(--wf-r-xl);padding:4rem;text-align:center;
  overflow:hidden;background:var(--wf-bg-card);border:1px solid var(--wf-border)}

.ac-cta__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ac-cta__orb{position:absolute;border-radius:50%;filter:blur(80px)}
.ac-cta__orb--1{width:400px;height:400px;top:-20%;left:-10%;
  background:radial-gradient(circle,rgba(6,182,212,0.15),transparent 70%)}
.ac-cta__orb--2{width:350px;height:350px;bottom:-20%;right:-10%;
  background:radial-gradient(circle,rgba(99,102,241,0.1),transparent 70%)}

.ac-cta__content{position:relative;z-index:1}
.ac-cta__title{font-size:clamp(1.8rem,3.5vw,2.8rem);margin-top:1rem;margin-bottom:1rem}
.ac-cta__desc{font-size:1.05rem;color:var(--wf-text-2);line-height:1.7;
  max-width:600px;margin:0 auto 2rem}
.ac-cta__actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-bottom:1.5rem}
.ac-cta__note{font-size:12px;color:var(--wf-text-3)}


/* ═══════════════════════════════════════════════════════════════════════
   JORNADA DIGITAL ILLUSTRATION (ac-jn)
   Full omnichannel journey — from client contact to protocol closure
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Screenshot wrapper ── */
.ac-jn-screenshot {
  margin-top: 1rem;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 60px rgba(6,182,212,.06);
}

/* ── Browser frame ── */
.ac-jn-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: #0c0c0e;
}
.ac-jn-frame__bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ac-jn-frame__dots {
  display: flex; gap: 5px;
}
.ac-jn-frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.ac-jn-frame__dot--r { background: #ef4444; }
.ac-jn-frame__dot--y { background: #eab308; }
.ac-jn-frame__dot--g { background: #22c55e; }
.ac-jn-frame__url {
  flex: 1; display: flex; align-items: center; gap: .4rem;
  padding: .25rem .8rem; border-radius: 6px;
  background: rgba(255,255,255,.04);
  font-size: .72rem; color: var(--wf-text-3); font-family: monospace;
}
.ac-jn-frame__actions {
  display: flex; align-items: center; gap: .5rem; color: var(--wf-text-3);
}
.ac-jn-frame__viewport {
  position: relative; overflow: hidden; background: #08080b;
}

/* ── Live dot ── */
.ac-jn__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; display: inline-block;
  animation: ac-jn-pulse 2s ease-in-out infinite;
}
@keyframes ac-jn-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50% { opacity: .6; box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}

/* ── Main container ── */
.ac-jn {
  width: 100%; display: flex;
  background: #08080b; color: rgba(255,255,255,.7);
  font-size: .78rem; line-height: 1.45; overflow: hidden;
}

/* ── Sidebar ── */
.ac-jn__sidebar {
  width: 50px; min-width: 50px;
  background: rgba(255,255,255,.02);
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; align-items: center;
  padding: .65rem 0; gap: .5rem;
}
.ac-jn__logo {
  font-size: 1.2rem; color: var(--wf-cyan-light, #06b6d4);
  margin-bottom: .3rem; opacity: .8;
}
.ac-jn__nav {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: rgba(255,255,255,.25);
  transition: all 150ms ease;
}
.ac-jn__nav--active {
  background: rgba(6,182,212,.12); color: #06b6d4;
}

/* ── Main ── */
.ac-jn__main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}

/* ── Topbar ── */
.ac-jn__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .8rem; border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap; gap: .35rem;
}
.ac-jn__breadcrumb {
  font-size: .56rem; color: rgba(255,255,255,.3); white-space: nowrap;
}
.ac-jn__breadcrumb strong { color: rgba(255,255,255,.6); }
.ac-jn__topbar-right {
  display: flex; align-items: center; gap: .4rem;
}
.ac-jn__pill {
  display: flex; align-items: center; gap: .22rem;
  padding: .15rem .5rem; border-radius: 5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  font-size: .5rem; color: rgba(255,255,255,.4);
}
.ac-jn__pill--live {
  background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.15);
  color: #10b981;
}

/* ── Canvas ── */
.ac-jn__canvas {
  flex: 1; display: flex; flex-direction: column; align-items: stretch;
  padding: .9rem 1.2rem; gap: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.02) 1px, transparent 0);
  background-size: 22px 22px;
}

.ac-jn__canvas--flow {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ── Horizontal workflow layers (purchase request) ── */
.ac-wf-h {
  min-width: 1220px;
  display: flex;
  align-items: stretch;
  gap: .35rem;
  padding: .2rem 0;
}
.ac-wf-h__layer {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .55rem;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.ac-wf-h__label {
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  padding-bottom: .45rem;
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.ac-wf-h__stack {
  display: flex;
  flex-direction: column;
  gap: .42rem;
}
.ac-wf-h__connector {
  width: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-wf-h__connector span {
  display: block;
  width: 100%;
  height: 1.6px;
  background: linear-gradient(90deg, rgba(6,182,212,.45), rgba(99,102,241,.24));
  position: relative;
}
.ac-wf-h__connector span::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left: 6px solid rgba(99,102,241,.45);
}
.ac-wf-h__connector span::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #06b6d4;
  transform: translateY(-50%);
  opacity: 0;
  animation: ac-jn-flow-dot 2.8s ease-in-out infinite;
}
.ac-wf-h__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.ac-wf-h__chip {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .14rem .38rem;
  border-radius: 999px;
  font-size: .43rem;
  font-weight: 700;
  color: rgba(255,255,255,.58);
  border: 1px solid rgba(6,182,212,.18);
  background: rgba(6,182,212,.06);
  white-space: nowrap;
}


/* ── Layers ── */
.ac-jn__layer {
  display: flex; align-items: center; gap: .7rem;
}
.ac-jn__layer-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg);
  font-size: .46rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.18);
  min-width: 18px; text-align: center;
  user-select: none;
}
.ac-jn__layer-content {
  flex: 1; display: flex; align-items: center; gap: .55rem;
  min-width: 0; justify-content: center;
}
.ac-jn__layer-content--wrap {
  flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.ac-jn__layer-content--grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem;
}
.ac-jn__layer-content--split {
  flex-wrap: nowrap;
}

/* ── Horizontal arrows ── */
.ac-jn__harrow {
  display: flex; align-items: center; justify-content: center;
  width: 38px; min-width: 30px; flex-shrink: 0;
}
.ac-jn__harrow span {
  display: block; width: 100%; height: 1.5px;
  background: linear-gradient(90deg, rgba(6,182,212,.4), rgba(6,182,212,.12));
  position: relative;
}
.ac-jn__harrow span::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  transform: translateY(-50%);
  border: 3.5px solid transparent;
  border-left: 5px solid rgba(6,182,212,.4);
}
.ac-jn__harrow span::before {
  content: ''; position: absolute; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: #06b6d4; transform: translateY(-50%);
  opacity: 0; animation: ac-jn-flow-dot 2.5s ease-in-out infinite;
}
@keyframes ac-jn-flow-dot {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

/* ── Vertical arrows ── */
.ac-jn__varrow {
  display: flex; justify-content: center;
  height: 30px; position: relative;
  margin-left: 18px;
}
.ac-jn__varrow span {
  display: block; width: 1.5px; height: 100%;
  background: linear-gradient(180deg, rgba(6,182,212,.35), rgba(99,102,241,.15));
  position: relative;
}
.ac-jn__varrow span::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  border: 3.5px solid transparent;
  border-top: 5px solid rgba(99,102,241,.35);
}
.ac-jn__varrow--bi {
  height: 36px;
}
.ac-jn__varrow--bi span {
  background: linear-gradient(180deg, rgba(6,182,212,.35), rgba(16,185,129,.3), rgba(6,182,212,.35));
}
.ac-jn__varrow--bi span::before {
  content: ''; position: absolute; left: 50%; top: -1px;
  transform: translateX(-50%);
  border: 3.5px solid transparent;
  border-bottom: 5px solid rgba(6,182,212,.35);
}
.ac-jn__varrow--bi span::after {
  border-top: 5px solid rgba(6,182,212,.35);
}

/* ── Nodes ── */
.ac-jn__node {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  transition: all 250ms ease;
  white-space: nowrap; flex-shrink: 0;
}
.ac-jn__node:hover {
  border-color: rgba(6,182,212,.25);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.ac-jn__node--sm {
  padding: .38rem .55rem;
}
.ac-jn__node--active {
  border-color: rgba(16,185,129,.2);
  background: rgba(16,185,129,.03);
}
.ac-jn__node-icon {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.ac-jn__node-icon--amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.ac-jn__node-icon--indigo { background: rgba(99,102,241,.1);  color: #818cf8; }
.ac-jn__node-icon--cyan   { background: rgba(6,182,212,.1);   color: #06b6d4; }
.ac-jn__node-icon--violet { background: rgba(167,139,250,.1); color: #a78bfa; }
.ac-jn__node-icon--green  { background: rgba(16,185,129,.1);  color: #10b981; }

.ac-jn__node-info {
  display: flex; flex-direction: column;
}
.ac-jn__node-name {
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.8);
  display: flex; align-items: center; gap: .25rem;
}
.ac-jn__node-desc {
  font-size: .5rem; color: rgba(255,255,255,.3);
}
.ac-jn__node-ok {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .52rem; background: rgba(16,185,129,.12); color: #10b981;
  flex-shrink: 0;
}
.ac-jn__node-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; flex-shrink: 0;
  animation: ac-jn-pulse 2s ease-in-out infinite;
}

/* ── Tags ── */
.ac-jn__tag {
  font-size: .44rem; padding: .1rem .3rem; border-radius: 3px;
  font-weight: 700; letter-spacing: .02em;
}
.ac-jn__tag--ai {
  background: rgba(167,139,250,.12); color: #a78bfa;
}
.ac-jn__tag--meta {
  background: rgba(37,211,102,.1); color: #25d366;
  display: block; margin-top: 1px;
}

/* ── Channels (layer 1) ── */
.ac-jn__channels {
  display: flex; flex-wrap: wrap; gap: .3rem;
  justify-content: center;
}
.ac-jn__channel {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem; padding: .4rem .35rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  text-align: center;
  transition: all 250ms ease;
  min-width: 64px;
}
.ac-jn__channel:hover {
  border-color: rgba(6,182,212,.2);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.ac-jn__channel--active {
  border-color: rgba(37,211,102,.2);
  background: rgba(37,211,102,.04);
  box-shadow: 0 0 12px rgba(37,211,102,.06);
}
.ac-jn__channel i {
  font-size: 1.05rem; color: rgba(255,255,255,.45);
}
.ac-jn__channel--active i { color: #25d366; }
.ac-jn__channel span {
  font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.65);
}

/* ── Rules engine ── */
.ac-jn__layer--rules {
  padding: .15rem 0;
}
.ac-jn__layer--rules .ac-jn__layer-content {
  flex-wrap: wrap; gap: .3rem; justify-content: center;
}
.ac-jn__rules-label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .5rem; font-weight: 700; color: rgba(245,158,11,.6);
  margin-right: .2rem; white-space: nowrap;
}
.ac-jn__rules-label i { font-size: .75rem; }
.ac-jn__rule {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .45rem; border-radius: 6px;
  background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.12);
  font-size: .48rem; font-weight: 600;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  transition: all 200ms ease;
}
.ac-jn__rule:hover {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.2);
  color: rgba(255,255,255,.7);
}
.ac-jn__rule i {
  font-size: .65rem; color: rgba(245,158,11,.7);
}

/* ── Fork / bifurcation ── */
.ac-jn__fork {
  display: flex; flex-direction: column; gap: .35rem;
  position: relative;
  padding-left: .15rem;
}
.ac-jn__fork::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 1.5px; height: calc(100% - 16px);
  background: linear-gradient(180deg, rgba(6,182,212,.3), rgba(6,182,212,.15));
}
.ac-jn__fork-branch {
  display: flex; align-items: center; gap: .55rem;
}
.ac-jn__fork-branch--handoff {
  border-left: 1.5px solid rgba(245,158,11,.18);
  padding-left: .35rem; margin-left: .15rem;
  border-radius: 0 0 0 6px;
}

/* Handoff vertical stack (Handoff above Distribuição) */
.ac-jn__handoff-stack {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ac-jn__varrow--short {
  height: 18px; margin-left: 0;
}

/* ── Handoff-only path container ── */
.ac-jn__handoff-path {
  position: relative;
  margin-left: 18px;
  padding-left: 14px;
  border-left: 1.5px dashed rgba(245,158,11,.2);
}
.ac-jn__handoff-path::before {
  content: 'Somente transbordo humano';
  position: absolute; top: -2px; left: 14px;
  font-size: .42rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: rgba(245,158,11,.4);
}

/* ── Varrow handoff label ── */
.ac-jn__varrow--handoff {
  position: relative;
}
.ac-jn__varrow-label {
  position: absolute; left: calc(50% + 10px); top: 50%;
  transform: translateY(-50%);
  font-size: .44rem; font-weight: 700; color: rgba(245,158,11,.5);
  white-space: nowrap;
}

/* ── Operators (layer 5) ── */
.ac-jn__layer--operators {
  padding: .4rem 0;
}
.ac-jn__operator {
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem; padding: .5rem .45rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  text-align: center;
  transition: all 250ms ease;
  position: relative;
  min-width: 72px;
}
.ac-jn__operator:hover {
  border-color: rgba(6,182,212,.2);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.ac-jn__operator--busy {
  border-color: rgba(245,158,11,.15);
  background: rgba(245,158,11,.02);
}
.ac-jn__operator--selected {
  border-color: rgba(16,185,129,.2);
  background: rgba(16,185,129,.04);
  box-shadow: 0 0 14px rgba(16,185,129,.06);
}
.ac-jn__operator i {
  font-size: 1.05rem; color: rgba(255,255,255,.45);
}
.ac-jn__operator--selected i { color: #10b981; }
.ac-jn__operator span {
  font-size: .54rem; font-weight: 700; color: rgba(255,255,255,.65);
}
.ac-jn__operator small {
  font-size: .44rem; color: rgba(255,255,255,.25);
}
.ac-jn__op-status {
  width: 6px; height: 6px; border-radius: 50%;
  position: absolute; top: 5px; right: 5px;
}
.ac-jn__op-status--ok {
  background: #10b981;
  box-shadow: 0 0 5px rgba(16,185,129,.4);
}
.ac-jn__op-status--busy {
  background: #f59e0b;
  box-shadow: 0 0 5px rgba(245,158,11,.4);
}
.ac-jn__op-status--away {
  background: rgba(255,255,255,.2);
}

/* ── Security bar ── */
.ac-jn__security {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: .45rem .8rem;
  background: rgba(16,185,129,.03);
  border-top: 1px solid rgba(16,185,129,.08);
  font-size: .5rem; color: rgba(255,255,255,.4);
}
.ac-jn__security span {
  display: flex; align-items: center; gap: .25rem;
}

/* ── Statusbar ── */
.ac-jn__statusbar {
  display: flex; align-items: center; gap: .9rem;
  padding: .4rem .8rem;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: .52rem; color: rgba(255,255,255,.3);
}
.ac-jn__statusbar span {
  display: flex; align-items: center; gap: .25rem;
}
.ac-jn__statusbar-right {
  margin-left: auto;
}

/* ── Footnote ── */
.ac-jn__footnote {
  text-align: center; margin-top: 1.5rem;
  font-size: .85rem; color: rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.ac-jn__footnote i { color: var(--wf-cyan-light, #06b6d4); font-size: .95rem; }
.ac-jn__footnote strong { color: rgba(255,255,255,.55); }


/* ═══════════════════════════════════════════
   RESPONSIVE (updated with journey illustration)
   ═══════════════════════════════════════════ */
@media(max-width:1024px){
  .ac-hero__inner{grid-template-columns:1fr;text-align:center}
  .ac-hero__desc{margin-left:auto;margin-right:auto}
  .ac-hero__ctas{justify-content:center}
  .ac-hero__kpis{max-width:400px;margin:0 auto}
  .ac-problems__grid{grid-template-columns:repeat(2,1fr)}
  .ac-modules-overview{flex-direction:column;gap:1rem}
  .ac-module-card__bridge{flex-direction:row;padding:0.5rem 0}
  .ac-module-card__bridge-line{width:30px;height:2px}
  .ac-features__grid{grid-template-columns:repeat(2,1fr)}
  .ac-handoff__details{grid-template-columns:1fr}
  .ac-journeys__grid{grid-template-columns:1fr}
  .ac-results__grid{grid-template-columns:repeat(3,1fr)}
  .ac-maturity__card{flex-direction:column;text-align:center}
  .ac-feature-block{padding:2rem}
  .ac-jn__layer-content { flex-wrap: wrap; }
  .ac-jn__layer-content--grid { gap: .35rem; }
  .ac-jn__rule { font-size: .44rem; padding: .16rem .35rem; }
  .ac-jn__rules-label { font-size: .46rem; }
  .ac-jn__channel { min-width: 56px; padding: .35rem .3rem; }
  .ac-jn__channel i { font-size: .9rem; }
  .ac-jn__channel span { font-size: .46rem; }
  .ac-wf-h { min-width: 1080px; }
  .ac-wf-h__layer { min-width: 200px; }
}

@media(max-width:640px){
  .ac-hero__kpis{grid-template-columns:1fr 1fr;gap:10px}
  .ac-problems__grid{grid-template-columns:1fr}
  .ac-features__grid{grid-template-columns:1fr}
  .ac-features__grid--2col{grid-template-columns:1fr}
  .ac-results__grid{grid-template-columns:repeat(2,1fr)}
  .ac-handoff__flow{flex-direction:column;align-items:center}
  .ac-handoff__arrow{transform:rotate(90deg)}
  .ac-cta{padding:2.5rem 1.5rem}
  .ac-feature-block{padding:1.5rem}
  .ac-jn__sidebar { display: none; }
  .ac-jn__layer-label { display: none; }
  .ac-jn__layer-content { flex-wrap: wrap; gap: .25rem; }
  .ac-jn__layer-content--grid { gap: .3rem; }
  .ac-jn__layer-content--split { flex-wrap: wrap; }
  .ac-jn__harrow { width: 20px; min-width: 18px; }
  .ac-jn__varrow { height: 22px; }
  .ac-jn__varrow--bi { height: 26px; }
  .ac-jn__fork-branch { flex-wrap: wrap; gap: .3rem; }
  .ac-jn__channel { min-width: 52px; }
  .ac-jn__operator { min-width: 60px; }
  .ac-jn__security { flex-direction: column; gap: .3rem; }
  .ac-jn__handoff-path { margin-left: 0; padding-left: 10px; }
  .ac-jn__handoff-path::before { left: 10px; font-size: .38rem; }
  .ac-jn__footnote { font-size: .72rem; flex-direction: column; }
  .ac-jn__rule { font-size: .4rem; padding: .14rem .3rem; }
  .ac-jn__rules-label { font-size: .42rem; }
  .ac-wf-h { min-width: 920px; }
  .ac-wf-h__layer { min-width: 172px; padding: .45rem; }
  .ac-wf-h__label { font-size: .44rem; }
  .ac-wf-h__connector { width: 28px; min-width: 28px; }
  .ac-wf-h__chip { font-size: .4rem; }
}