/* ==========================================================================
   graphics.css — camada de MOVIMENTO + DATA-VIZ (vanilla, zero CDN)
   ---------------------------------------------------------------------------
   Estratégia de "coisas aparecendo e mudando conforme a tela rola":
   1. Preferência: animações NATIVAS ligadas ao scroll (animation-timeline:
      view()/scroll()) — sem JS, GPU, suaves. Ativadas via @supports.
   2. Fallback universal: classe .is-in adicionada pelo IntersectionObserver
      (viz.js) para navegadores sem scroll-driven (ex.: Firefox atual).
   3. Sem JS e sem suporte: tudo mostra o ESTADO FINAL (SEO/leitura a salvo).
   Respeita prefers-reduced-motion (bloco final zera o movimento).
   Tudo é transform/opacity. O conteúdo NUNCA depende do movimento p/ ser lido.
   ========================================================================== */

/* ---- sem JS: nada escondido; gráficos no estado final ---- */
html:not(.js) [data-reveal],
html:not(.js) .reveal,
html:not(.js) .reveal-group>*,
html:not(.js) .reveal-left,
html:not(.js) .reveal-right,
html:not(.js) .reveal-scale{opacity:1!important;transform:none!important}
html:not(.js) .kpi::before{width:var(--f-55)}
html:not(.js) .gauge__fill{stroke-dashoffset:calc(var(--circ) - var(--circ) * var(--pct) / 100)}
html:not(.js) .bar__fill{width:var(--w,50%)}
html:not(.js) .lc-line{stroke-dashoffset:0}
html:not(.js) .lc-area{opacity:1}
html:not(.js) .lc-dot,html:not(.js) .lc-dot-ring{opacity:1}
html:not(.js) .fstep__fill{right:calc(100% - var(--w))}
html:not(.js) .spark path{stroke-dashoffset:0}
html:not(.js) .scrollbar-top{display:none}
html:not(.js) .word{opacity:1;transform:none}

/* ========================================================================
   0. SCROLL PROGRESS (barra fina no topo + anel no botão-topo)
   Nativo: escala pela timeline de scroll da raiz. JS é só fallback.
   ======================================================================== */
.scrollbar-top{position:fixed;inset-block-start:0;inset-inline:0;height:3px;transform-origin:left;transform:scaleX(0);z-index:60;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .scrollbar-top{animation:sbGrow linear both;animation-timeline:scroll(root block);width:100%}
    @keyframes sbGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ========================================================================
   1. REVELAÇÃO AO ROLAR — genérica, dirigível por [data-reveal]
   Nativa (view-timeline) quando há suporte; senão .is-in via IO.
   Variantes: up (padrão), left, right, scale, blur.
   Stagger com --i (índice do filho) em qualquer container.
   ======================================================================== */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(30px)}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal="blur"]{transform:translateY(24px);filter:blur(10px)}
[data-reveal].is-in{opacity:1;transform:none;filter:none;transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}

/* legado (mantém compatibilidade caso alguma página use as classes antigas) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-group>*{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.reveal-group.is-in>*{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-left.is-in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-right.is-in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-scale.is-in{opacity:1;transform:none}

/* Native scroll-driven: quando suportado, as revelações "scrubam" com o scroll
   (aparecem enquanto a seção entra na viewport) — sensação premium. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html.js [data-reveal]{opacity:1;transform:none;filter:none;animation:revealIn both;animation-timeline:view();animation-range:entry 2% cover 26%}
    html.js [data-reveal="up"]{animation-name:revUp}
    html.js [data-reveal="left"]{animation-name:revLeft}
    html.js [data-reveal="right"]{animation-name:revRight}
    html.js [data-reveal="scale"]{animation-name:revScale}
    html.js [data-reveal="blur"]{animation-name:revBlur}
    @keyframes revUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
    @keyframes revLeft{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
    @keyframes revRight{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
    @keyframes revScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
    @keyframes revBlur{from{opacity:0;transform:translateY(28px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
    @keyframes revealIn{from{opacity:0}to{opacity:1}}
  }
}

/* ========================================================================
   2. TEXT REVEAL por palavra — headings/leads sobem palavra a palavra.
   JS embrulha cada palavra em <span class="word">. CSS anima com atraso.
   ======================================================================== */
.split .word{display:inline-block;opacity:0;transform:translateY(.7em) rotate(2deg);
  animation:wordIn .7s var(--ease) both;animation-delay:calc(var(--wi,0) * 45ms + 120ms)}
@keyframes wordIn{to{opacity:1;transform:none}}
/* leads que revelam ao entrar na viewport (IO adiciona .is-in) */
.split-on-scroll .word{opacity:0;transform:translateY(.6em)}
.split-on-scroll.is-in .word{animation:wordIn .6s var(--ease) both;animation-delay:calc(var(--wi,0) * 30ms)}

/* ========================================================================
   3. CONTADORES (count-up via viz.js)
   ======================================================================== */
.counter,.kpi__n,.gauge__pct,.trust__n,.bar__val,.stat__n{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--f-34)}
.kpi{position:relative;padding-block-start:var(--f-21)}
.kpi::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;height:3px;width:0;background:var(--accent);border-radius:2px;transition:width 1s var(--ease) .2s}
.kpi.is-in::before{width:var(--f-55)}
.kpi__n{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem);line-height:1}
.kpi__l{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);margin-block-start:var(--f-8);line-height:1.45}
.section--dark .kpi__n{color:#fff}
.section--dark .kpi__l{color:#9a9aa6}

/* ========================================================================
   4. MEDIDOR RADIAL (donut) que preenche
   ======================================================================== */
.gauge{--size:180px;--track:#e9ebef;--fill:var(--accent);--pct:0;position:relative;width:var(--size);height:var(--size);flex:none}
.section--dark .gauge{--track:#24242c}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge__track{fill:none;stroke:var(--track);stroke-width:12}
.gauge__fill{fill:none;stroke:var(--fill);stroke-width:12;stroke-linecap:round;stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);transition:stroke-dashoffset 1.4s var(--ease) .2s}
.gauge.is-in .gauge__fill{stroke-dashoffset:calc(var(--circ) - var(--circ) * var(--pct) / 100)}
.gauge__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge__pct{font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1}
.gauge__cap{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-block-start:4px}
.section--dark .gauge__pct{color:#fff}
.section--dark .gauge__cap{color:#9a9aa6}
.gauge-row{display:flex;align-items:center;gap:var(--f-34);flex-wrap:wrap}
.gauge-copy{flex:1;min-width:240px}

/* ========================================================================
   5. BARRAS horizontais animadas
   ======================================================================== */
.barviz{display:grid;gap:var(--f-21)}
.bar{display:grid;grid-template-columns:1fr auto;gap:var(--f-8) var(--f-13);align-items:center}
.bar__label{font-size:.95rem;color:var(--ink)}
.section--dark .bar__label{color:#d6d6de}
.roas .bar__label{color:#c7c7d0}
.bar__val{font-family:var(--font-mono);font-weight:600;font-size:.95rem;color:var(--accent-text);justify-self:end}
.section--dark .bar__val,.roas .bar__val{color:var(--accent-hi)}
.bar__track{grid-column:1 / -1;height:12px;background:#eef0f3;border-radius:100px;overflow:hidden;position:relative}
.section--dark .bar__track,.roas .bar__track{background:#20202a}
.bar__fill{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--accent-hi),var(--accent));transition:width 1.2s var(--ease) .15s}
.bar.is-in .bar__fill{width:var(--w,50%)}
.bar__fill--ghost{background:linear-gradient(90deg,#cfd3da,#aeb4bf)}
.section--dark .bar__fill--ghost,.roas .bar__fill--ghost{background:linear-gradient(90deg,#3a3a44,#54545e)}
.bar__val--ghost{color:#8a8a96!important;text-decoration:line-through;text-decoration-thickness:2px}
.bar__fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:shimmer 2.6s var(--ease) infinite;animation-delay:1.3s}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ========================================================================
   6. GRÁFICO DE LINHA que se desenha sozinho
   ======================================================================== */
.linechart{position:relative;width:100%}
.linechart svg{width:100%;height:auto;display:block;overflow:visible}
.lc-grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.section--dark .lc-grid line{stroke:#24242c}
.lc-area{fill:url(#lc-grad);opacity:0;transition:opacity 1.1s var(--ease) .9s}
.linechart.is-in .lc-area{opacity:1}
.lc-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease) .2s}
.linechart.is-in .lc-line{stroke-dashoffset:0}
.lc-dot{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s ease 1.9s;animation:pulse 2s ease-in-out 2.1s infinite}
.linechart.is-in .lc-dot{opacity:1}
.lc-dot-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.linechart.is-in .lc-dot-ring{animation:ping 2s ease-out 2.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes ping{0%{opacity:.6;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.6)}}
.lc-labels{display:flex;justify-content:space-between;margin-block-start:var(--f-8);font-family:var(--font-mono);font-size:.7rem;color:var(--ink-2)}
.chart-note{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-2);margin-block-start:var(--f-13);text-align:center;letter-spacing:.02em}
.section--dark .chart-note{color:#8a8a96}

/* ========================================================================
   7. FUNIL de conversão / carrinho
   ======================================================================== */
.funnel{display:grid;gap:var(--f-13)}
.fstep{position:relative;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--f-13) var(--f-21);overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:var(--f-13)}
.section--dark .fstep{background:#15151a;border-color:#24242c}
.fstep__fill{position:absolute;inset:0 100% 0 0;background:var(--accent-soft);transition:right 1.1s var(--ease);z-index:0}
.fstep.is-in .fstep__fill{right:calc(100% - var(--w))}
.fstep--danger .fstep__fill{background:rgba(239,68,68,.12)}
.fstep--win .fstep__fill{background:rgba(34,197,94,.16)}
.fstep__name,.fstep__val{position:relative;z-index:1}
.fstep__name{font-size:.98rem;color:var(--ink)}
.section--dark .fstep__name{color:#e6e6ec}
.fstep__val{font-family:var(--font-display);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums}
.fstep--danger .fstep__val{color:#ef4444}
.fstep--win .fstep__val{color:#22c55e}

/* ========================================================================
   8. CALCULADORA DE ROAS REAL (interativa)
   ======================================================================== */
.calc{background:var(--authority);color:#e8e8ee;border-radius:var(--r-lg);padding:clamp(var(--f-21),3vw,var(--f-34));box-shadow:var(--shadow-lift);display:grid;gap:var(--f-21)}
.calc__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-13);flex-wrap:wrap}
.calc__title{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff}
.calc__tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);display:inline-flex;align-items:center;gap:6px}
.calc__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-hi);animation:blink 1.6s ease-in-out infinite}
.calc__inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--f-21)}
.calc__field{display:grid;gap:var(--f-8)}
.calc__field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#9a9aa6}
.calc__input-wrap{position:relative;display:flex;align-items:center}
.calc__input-wrap .pfx{position:absolute;inset-inline-start:14px;font-family:var(--font-mono);color:#7a7a86;font-size:.95rem;pointer-events:none}
.calc__field input{width:100%;background:#15151c;border:1px solid #2a2a34;border-radius:var(--r-md);color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.15rem;padding:var(--f-13) var(--f-13) var(--f-13) 34px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.calc__field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.25)}
.calc__slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:#2a2a34;outline:none;margin-block-start:var(--f-8)}
.calc__slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #15151c;box-shadow:0 0 0 1px var(--accent),0 0 16px rgba(249,115,22,.6)}
.calc__slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #15151c}
.calc__hint{font-family:var(--font-mono);font-size:.7rem;color:#8a8a96;line-height:1.45;margin-block-start:var(--f-8)}
.calc__out{border-block-start:1px solid #24242c;padding-block-start:var(--f-21);display:grid;gap:var(--f-13)}
.calc__bars{display:grid;gap:var(--f-13)}
.calc__bar{display:grid;grid-template-columns:88px 1fr auto;gap:var(--f-13);align-items:center}
.calc__bar-label{font-family:var(--font-mono);font-size:.72rem;color:#9a9aa6;text-transform:uppercase;letter-spacing:.04em}
.calc__bar-track{height:14px;background:#1c1c24;border-radius:100px;overflow:hidden}
.calc__bar-fill{height:100%;width:0;border-radius:100px;transition:width .7s var(--ease)}
.calc__bar-fill--plat{background:linear-gradient(90deg,#54545e,#3a3a44)}
.calc__bar-fill--real{background:linear-gradient(90deg,var(--accent-hi),var(--accent))}
.calc__bar-val{font-family:var(--font-display);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;justify-self:end}
.calc__bar-val--plat{color:#8a8a96}
.calc__bar-val--real{color:var(--accent-hi)}
.calc__verdict{display:flex;align-items:center;gap:var(--f-13);background:#15151c;border:1px solid #24242c;border-radius:var(--r-md);padding:var(--f-13) var(--f-21)}
.calc__verdict-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:18px}
.calc__verdict.good .calc__verdict-ico{background:rgba(34,197,94,.15);color:#22c55e}
.calc__verdict.mid .calc__verdict-ico{background:rgba(249,115,22,.15);color:var(--accent-hi)}
.calc__verdict.bad .calc__verdict-ico{background:rgba(239,68,68,.15);color:#ef4444}
.calc__verdict-txt{font-size:.92rem;color:#c7c7d0;line-height:1.5}
.calc__verdict-txt strong{color:#fff}

/* ========================================================================
   9. SPARKLINES + chips
   ======================================================================== */
.spark{width:100%;height:40px;display:block;overflow:visible}
.spark path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s var(--ease) .3s}
.is-in .spark path,.spark.is-in path{stroke-dashoffset:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;background:var(--accent-soft);color:var(--accent-text);border-radius:100px;padding:4px 12px;font-weight:600}
.section--dark .chip{background:rgba(249,115,22,.14);color:var(--accent-hi)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ========================================================================
   10. "MÁQUINA" — nós que giram (motivo de automação) + scrollytelling
   ======================================================================== */
.machine{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-21);align-items:stretch}
.node{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--f-21);display:grid;gap:var(--f-13);overflow:hidden;transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base)}
.node:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.node__spin{width:48px;height:48px;color:var(--accent)}
.node__spin svg{width:100%;height:100%;animation:spin 9s linear infinite}
.node:nth-child(2) .node__spin svg{animation-duration:6s;animation-direction:reverse}
.node:nth-child(3) .node__spin svg{animation-duration:12s}
@keyframes spin{to{transform:rotate(360deg)}}
.node__n{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--accent-text);letter-spacing:.08em}
.node__flow{position:absolute;inset-block-start:50%;inset-inline-end:-11px;width:22px;height:2px;background:var(--accent);z-index:2}
.node__flow::after{content:"";position:absolute;inset-inline-end:0;inset-block-start:-3px;border-inline-start:7px solid var(--accent);border-block:4px solid transparent}
.node:last-child .node__flow{display:none}
.node h3{font-size:1.1rem}
.node p{color:var(--ink-2);font-size:.94rem}

/* ========================================================================
   11. EFEITOS DE FUNDO — orbs, mesh, grade de pontos, varredura
   ======================================================================== */
.has-bg{position:relative;overflow:clip;isolation:isolate}
.has-bg>.wrap{position:relative;z-index:2}

.bg-orbs{position:absolute;inset:-12% 0;z-index:0;pointer-events:none}
.bg-orbs i{position:absolute;display:block;border-radius:50%;filter:blur(72px);will-change:transform}
.bg-orbs .orb-a{width:min(42vw,460px);aspect-ratio:1;background:radial-gradient(circle at 35% 35%,rgba(249,115,22,.55),transparent 68%);inset-block-start:-8%;inset-inline-start:-6%;animation:drift1 23s ease-in-out infinite}
.bg-orbs .orb-b{width:min(34vw,380px);aspect-ratio:1;background:radial-gradient(circle,rgba(251,146,60,.5),transparent 70%);inset-block-end:-10%;inset-inline-end:-5%;animation:drift2 27s ease-in-out infinite}
.bg-orbs .orb-c{width:min(24vw,260px);aspect-ratio:1;background:radial-gradient(circle,rgba(234,88,12,.45),transparent 70%);inset-block-start:38%;inset-inline-end:24%;animation:drift3 31s ease-in-out infinite}
.section--alt .bg-orbs i{opacity:.5}
.section--dark .bg-orbs i{opacity:.34;filter:blur(80px)}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(64px,44px) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-54px,-34px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}33%{transform:translate(-42px,32px)}66%{transform:translate(34px,-22px)}}

/* mesh gradient animado (hero) — malha viva por trás do conteúdo */
.bg-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(40% 55% at 15% 15%,rgba(249,115,22,.18),transparent 60%),
    radial-gradient(35% 45% at 85% 25%,rgba(251,146,60,.14),transparent 60%),
    radial-gradient(45% 50% at 75% 80%,rgba(234,88,12,.12),transparent 60%);
  background-size:200% 200%;animation:mesh 26s ease-in-out infinite}
@keyframes mesh{0%,100%{background-position:0% 0%,100% 0%,100% 100%}50%{background-position:20% 30%,70% 20%,80% 70%}}

.bg-dots::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(249,115,22,.16) 1.1px,transparent 1.2px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);
  animation:dots 55s linear infinite}
@keyframes dots{to{transform:translate(36px,36px)}}

/* grade de linhas técnicas (blueprint) para seções escuras */
.bg-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(249,115,22,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(249,115,22,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%)}

.section--dark.has-bg::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(249,115,22,.7),transparent);background-size:45% 100%;background-repeat:no-repeat;animation:sweep 7s linear infinite}
@keyframes sweep{from{background-position:-45% 0}to{background-position:145% 0}}

/* número/wordmark fantasma decorativo */
.ghost-num{position:absolute;z-index:0;font-family:var(--font-display);font-weight:700;font-size:clamp(120px,22vw,300px);line-height:.8;color:rgba(249,115,22,.05);pointer-events:none;user-select:none;inset-inline-end:2%;inset-block-start:-4%}
.section--dark .ghost-num{color:rgba(255,255,255,.035)}

/* ---- parallax nativo: fundos e camadas deslizam com o scroll ---- */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .bg-orbs{animation:orbScroll linear both;animation-timeline:scroll(root block)}
    @keyframes orbScroll{from{transform:translateY(-70px)}to{transform:translateY(70px)}}
    .par-up{animation:parUp linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parUp{from{transform:translateY(52px)}to{transform:translateY(-52px)}}
    .par-slow{animation:parSlow linear both;animation-timeline:view();animation-range:cover}
    @keyframes parSlow{from{transform:translateY(30px)}to{transform:translateY(-30px)}}
    .ghost-num{animation:ghostDrift linear both;animation-timeline:view();animation-range:cover}
    @keyframes ghostDrift{from{transform:translateX(40px)}to{transform:translateX(-40px)}}
  }
}

/* ========================================================================
   12. STICKY SPLIT — um lado fixa enquanto o outro rola (scrollytelling)
   ======================================================================== */
.sticky-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(var(--f-34),5vw,var(--f-89));align-items:start}
.sticky-aside{position:sticky;inset-block-start:calc(var(--header-h) + var(--f-21));align-self:start}
.sticky-index{display:grid;gap:2px;margin-block-start:var(--f-34);border-inline-start:1px solid var(--line)}
.section--dark .sticky-index{border-color:#2a2a34}
.sticky-index a{display:flex;gap:var(--f-13);align-items:baseline;padding:var(--f-8) var(--f-13);font-family:var(--font-mono);font-size:.82rem;color:var(--ink-2);border-inline-start:2px solid transparent;margin-inline-start:-1px;transition:color var(--t-base),border-color var(--t-base),background var(--t-base),padding-inline-start var(--t-base)}
.sticky-index a .n{color:var(--accent-text);font-weight:600;flex:none}
.section--dark .sticky-index a{color:#8a8a96}.section--dark .sticky-index a .n{color:var(--accent-hi)}
.sticky-index a:hover{color:var(--ink)}
.sticky-index a.active{color:var(--ink);border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent);padding-inline-start:var(--f-21)}
.section--dark .sticky-index a.active{color:#fff;background:linear-gradient(90deg,rgba(249,115,22,.16),transparent)}
.sticky-body{display:grid;gap:var(--f-21)}

/* ========================================================================
   13. MARQUEE — faixa infinita de ferramentas/skills (muito elemento, zero texto)
   ======================================================================== */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:var(--f-13);animation:marq-left 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
/* 2ª linha corre no sentido contrário (direita) — keyframe explícito, sem depender de 'reverse' */
.marquee--rev .marquee__track{animation-name:marq-right}
@keyframes marq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq-item{display:inline-flex;align-items:center;gap:var(--f-8);font-family:var(--font-mono);font-size:.85rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:var(--f-8) var(--f-21);white-space:nowrap}
.mq-item svg{width:16px;height:16px;color:var(--accent)}
.section--dark .mq-item{color:#d6d6de;background:#15151a;border-color:#26262b}

/* ========================================================================
   14. SPOTLIGHT do cursor em seções escuras (JS seta --sx/--sy)
   ======================================================================== */
.spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(249,115,22,.12),transparent 70%)}
.has-spot:hover .spotlight{opacity:1}

/* ========================================================================
   15. BADGE flutuante + pulso "ao vivo"
   ======================================================================== */
.live-badge{display:inline-flex;align-items:center;gap:var(--f-8);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:100px;padding:5px 12px}
.section--dark .live-badge{color:var(--accent-hi)}
.live-badge .pulse{position:relative;width:8px;height:8px}
.live-badge .pulse::before,.live-badge .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent)}
.live-badge .pulse::after{animation:ping 1.8s ease-out infinite}

/* ========================================================================
   16. ELEMENTOS QUE SE MOVEM SOZINHOS (ambiente, loop infinito)
   ======================================================================== */

/* --- ticker de métricas "ao vivo": chips de dado rolando sem parar --- */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.section--dark .ticker{border-color:#24242c}
.ticker__track{display:flex;width:max-content;gap:var(--f-34);padding-block:var(--f-13);animation:marq-left 30s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:var(--f-8);font-family:var(--font-mono);font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.section--dark .tk{color:#b6b6c0}
.tk b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.section--dark .tk b{color:#fff}
.tk .up{color:var(--c-green);font-weight:700}
.tk .dn{color:var(--accent-text)}
.section--dark .tk .dn{color:var(--accent-hi)}
.tk .live{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.6s ease-in-out infinite}

/* --- "equalizer" de atividade: barrinhas que pulsam sem parar --- */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:eqbounce 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s;animation-duration:.9s}
.eq i:nth-child(3){animation-delay:.3s;animation-duration:1.3s}
.eq i:nth-child(4){animation-delay:.45s;animation-duration:.8s}
.eq i:nth-child(5){animation-delay:.6s;animation-duration:1.15s}
@keyframes eqbounce{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* --- partículas flutuantes de fundo (seções escuras) --- */
.floaties{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.floaties i{position:absolute;display:block;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-hi),transparent 70%);opacity:.5;will-change:transform}
.floaties i:nth-child(1){left:8%;top:80%;animation:floatUp 15s linear infinite}
.floaties i:nth-child(2){left:22%;top:90%;width:4px;animation:floatUp 19s linear infinite 2s}
.floaties i:nth-child(3){left:40%;top:85%;width:8px;animation:floatUp 22s linear infinite 5s}
.floaties i:nth-child(4){left:58%;top:95%;animation:floatUp 17s linear infinite 1s}
.floaties i:nth-child(5){left:73%;top:82%;width:5px;animation:floatUp 21s linear infinite 4s}
.floaties i:nth-child(6){left:88%;top:92%;width:7px;animation:floatUp 16s linear infinite 3s}
@keyframes floatUp{0%{transform:translateY(0) scale(.6);opacity:0}
  12%{opacity:.55}88%{opacity:.4}100%{transform:translateY(-120vh) scale(1);opacity:0}}

/* --- sublinhado "vivo" que desliza sozinho sob o eyebrow do CTA final --- */
.wave-line{height:2px;width:120px;margin-inline:auto;margin-block-start:var(--f-21);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:50% 100%;
  background-repeat:no-repeat;animation:sweep 3.2s linear infinite}

/* ========================================================================
   17. REDUCED MOTION — desliga movimento, mostra estado final
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],.reveal,.reveal-group>*,.reveal-left,.reveal-right,.reveal-scale,.word{opacity:1!important;transform:none!important;filter:none!important}
  .autobar::after{transform:scaleX(1)}
  .kpi::before{width:var(--f-55)!important}
  .gauge__fill{stroke-dashoffset:calc(var(--circ) - var(--circ) * var(--pct) / 100)}
  .bar__fill{width:var(--w,50%)}
  .bar__fill::after{display:none}
  .lc-line{stroke-dashoffset:0}.lc-area{opacity:1}.lc-dot,.lc-dot-ring{opacity:1}
  .fstep__fill{right:calc(100% - var(--w))}
  .spark path{stroke-dashoffset:0}
  .node__spin svg,.chip .dot,.calc__tag::before{animation:none}
  .marquee__track,.ticker__track{animation:none}
  .eq i,.floaties i,.wave-line{animation:none}
  .floaties{display:none}
  .scrollbar-top{display:none}
  .bg-orbs i,.bg-mesh,.bg-dots::before,.section--dark.has-bg::after,.ghost-num{animation:none}
  .par-up,.par-slow,.bg-orbs{animation:none;transform:none}
  .spotlight{display:none}
}