/* C&D Labs — V1 custom CSS
   Tailwind covers ~90% of styling; this file holds:
   - Marquee keyframe + perpetual float
   - Spotlight gradient under cursor (via --x / --y CSS vars)
   - Reveal entry choreography
   - Mobile menu open state
   - Reduced-motion safety
*/

:root {
  /* Easing curves */
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);   /* padrão da casa — reveals, transições lentas */
  --ease-snap: cubic-bezier(0.55, 0, 0.28, 1.2); /* CTAs, micro-interações com leve overshoot */
  --ease-linear: linear;                          /* loops infinitos (marquee, kinetic, orbit) */

  /* Durations canônicas (use no lugar de números soltos) */
  --dur-instant: 200ms;   /* hover, focus, transitions sub-perceptíveis */
  --dur-snap:    400ms;   /* feedback de click, accordion, dropdown */
  --dur-smooth:  900ms;   /* reveals com blur, transições editoriais */
  --dur-pulse:  1600ms;   /* indicadores "ao vivo", dots respirando */
  --dur-icon:   2400ms;   /* loops de ícone curtos (bars, rings) */
  --dur-loop:   4000ms;   /* loops contínuos médios (float, key draw) */
  --dur-narrative: 8000ms;/* cenas longas (caos, WhatsApp, auto-checklist) */
  --dur-ambient: 18000ms; /* drift de blobs/grid de fundo */

  /* Cursor spotlight position (atualizada via JS) */
  --mx: -300px;
  --my: -300px;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

html { background: #050505; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Page-wide cursor spotlight (sits above bg, below content) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    560px circle at var(--mx) var(--my),
    rgba(16, 185, 129, 0.07),
    transparent 55%
  );
  transition: opacity 0.5s var(--ease-soft);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, transparent, #10b981 40%, #34d399 60%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* ---------- Hero dot grid drifting ---------- */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 0 0;
  animation: dot-drift 22s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 30% 35%, black, transparent 70%);
          mask-image: radial-gradient(ellipse at 30% 35%, black, transparent 70%);
}
@keyframes dot-drift {
  to { background-position: 26px 26px; }
}

/* ---------- Slow breathing drift on background blobs ---------- */
@keyframes blob-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -28px, 0) scale(1.06); }
}
@keyframes blob-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-32px, 24px, 0) scale(0.94); }
}
@keyframes blob-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(28px, -18px, 0); }
}
.blob-1 { animation: blob-1 18s ease-in-out infinite; }
.blob-2 { animation: blob-2 22s ease-in-out infinite; }
.blob-3 { animation: blob-3 26s ease-in-out infinite; }

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-track:hover { animation-play-state: paused; }

/* ---------- Perpetual float (deploy pill) ---------- */
@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
[data-float] {
  animation: float-y 4.6s var(--ease-soft) infinite;
  will-change: transform;
}

/* ---------- Spotlight on bento/diff cards ---------- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight] .spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  background: radial-gradient(
    320px circle at var(--x, 50%) var(--y, 50%),
    rgba(16, 185, 129, 0.14),
    transparent 60%
  );
}
[data-spotlight]:hover .spotlight { opacity: 1; }

/* ---------- Conic halo on hover (bento + diff cards) ---------- */
[data-halo] { position: relative; }
[data-halo]::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    rgba(16, 185, 129, 0.55) 30deg,
    transparent 90deg,
    transparent 180deg,
    rgba(52, 211, 153, 0.35) 220deg,
    transparent 280deg
  );
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s var(--ease-soft);
  animation: halo-spin 6s linear infinite;
}
[data-halo]:hover::before { opacity: 1; }
@keyframes halo-spin {
  to { --angle: 360deg; }
}

/* ---------- 3D tilt cards ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.6s var(--ease-soft);
  will-change: transform;
}

/* ---------- Hero underline draw on reveal ---------- */
.hero-underline path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.4s var(--ease-soft) 0.4s;
}
[data-reveal].is-visible .hero-underline path {
  stroke-dashoffset: 0;
}

/* ---------- Reveal on scroll (IntersectionObserver attaches .is-visible) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft);
  will-change: transform, opacity, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* ---------- H1 word stagger (Wispr-style) ---------- */
[data-split] .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 60%, 0);
  filter: blur(10px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft);
  will-change: transform, opacity, filter;
}
[data-split].is-visible .word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
[data-split].is-visible .word:nth-child(1) { transition-delay: 0.05s; }
[data-split].is-visible .word:nth-child(2) { transition-delay: 0.13s; }
[data-split].is-visible .word:nth-child(3) { transition-delay: 0.21s; }
[data-split].is-visible .word:nth-child(4) { transition-delay: 0.29s; }
[data-split].is-visible .word:nth-child(5) { transition-delay: 0.37s; }
[data-split].is-visible .word:nth-child(6) { transition-delay: 0.45s; }
[data-split].is-visible .word:nth-child(7) { transition-delay: 0.53s; }
[data-split].is-visible .word:nth-child(8) { transition-delay: 0.61s; }

/* ---------- Bento cascade (extra delay per child after reveal) ---------- */
[data-cascade] [data-reveal]:nth-child(1).is-visible { transition-delay: 0s; }
[data-cascade] [data-reveal]:nth-child(2).is-visible { transition-delay: 0.08s; }
[data-cascade] [data-reveal]:nth-child(3).is-visible { transition-delay: 0.16s; }
[data-cascade] [data-reveal]:nth-child(4).is-visible { transition-delay: 0.24s; }

/* ---------- Kinetic strip (huge outline marquee) ---------- */
.kinetic-strip {
  background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.02), transparent);
}
.kinetic-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  font-size: clamp(2.5rem, 7vw, 6.5rem); /* v2: reduzido de clamp(3.5rem,11vw,11rem) — gesto mantido, sem grito */
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  width: max-content;
  animation: marquee 38s linear infinite;
  -webkit-text-stroke: 1px rgba(245, 246, 247, 0.45);
  color: transparent;
  will-change: transform;
}
.kinetic-track .fill {
  -webkit-text-stroke: 0;
  color: #10b981;
}
.kinetic-track .dot {
  -webkit-text-stroke: 0;
  color: rgba(245, 246, 247, 0.25);
  font-weight: 400;
}
.kinetic-strip:hover .kinetic-track {
  /* v2: pausa no hover (em vez de acelerar — pausar convida leitura) */
  animation-play-state: paused;
}

/* ---------- Aurora drift on CTA blobs ---------- */
@keyframes aurora-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(60px, 30px, 0) scale(1.15); }
  66%      { transform: translate3d(-40px, -20px, 0) scale(0.9); }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-50px, -40px, 0) scale(1.2); }
  66%      { transform: translate3d(40px, 30px, 0) scale(0.85); }
}
.aurora-1 { animation: aurora-1 14s ease-in-out infinite; }
.aurora-2 { animation: aurora-2 18s ease-in-out infinite; }

/* ============================================================
   SCENE: Antes (chaos) + Depois (calm) — narrative animation
   ============================================================ */

/* Tinted ambient glow per scene */
.scene-chaos {
  background-image: radial-gradient(circle at 80% 20%, rgba(244, 63, 94, 0.05), transparent 60%);
}
.scene-calm {
  background-image: radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05), transparent 60%);
}

/* ============================================================
   CHAOS scene v2 — fewer windows, real spreadsheet anatomy
   ============================================================ */
.chaos-stage { isolation: isolate; perspective: 1200px; }

/* subtle grid texture on the stage itself */
.chaos-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 78%);
  pointer-events: none;
}

.chaos-stage .sheet {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 168px;
  border-radius: 6px;
  background: linear-gradient(180deg, #131418, #0a0b0e);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.04) inset;
  transform: rotate(var(--r));
  z-index: var(--z, 1);
  font-family: 'Geist Mono', ui-monospace, monospace;
  overflow: hidden;
  animation: sheet-drift 11s ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform;
}
.chaos-stage .sheet.dim {
  opacity: 0.55;
  filter: blur(0.8px);
}

.chaos-stage .sheet-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.chaos-stage .sheet-chrome .dots { display: flex; gap: 3px; flex-shrink: 0; }
.chaos-stage .sheet-chrome .dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.chaos-stage .sheet-chrome .dots i:first-child {
  background: rgba(244,63,94,0.7);
}
.chaos-stage .sheet-chrome .fname {
  font-size: 8.5px;
  line-height: 1;
  color: rgba(245,246,247,0.6);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.chaos-stage .col-row,
.chaos-stage .cell-row {
  display: grid;
  grid-template-columns: 18px 1fr 1fr 1fr;
}
.chaos-stage .col-row {
  background: rgba(255,255,255,0.02);
  font-size: 6.5px;
  color: rgba(245,246,247,0.3);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.chaos-stage .col-row span,
.chaos-stage .cell-row span {
  text-align: center;
  padding: 0 4px;
  line-height: 1;
  border-right: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chaos-stage .col-row span:last-child,
.chaos-stage .cell-row span:last-child { border-right: 0; }

.chaos-stage .cell-row {
  padding: 4px 0;
  font-size: 7.5px;
  color: rgba(245,246,247,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.chaos-stage .cell-row .rl {
  background: rgba(255,255,255,0.02);
  color: rgba(245,246,247,0.25);
  font-size: 6.5px;
}
.chaos-stage .cell-row .err {
  color: rgba(244,63,94,0.92);
  background: rgba(244,63,94,0.08);
}
.chaos-stage .cell-row .stale {
  text-decoration: line-through;
  color: rgba(245,246,247,0.32);
}
.chaos-stage .cell-row .hl {
  background: rgba(16,185,129,0.10);
  color: rgba(52,211,153,0.95);
}

.chaos-stage .sheet-status {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 6.5px;
  color: rgba(244,63,94,0.75);
  letter-spacing: 0.04em;
  animation: status-blink 1.4s ease-in-out infinite;
}
@keyframes status-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@keyframes sheet-drift {
  0%, 100% { transform: rotate(var(--r)) translate3d(0, 0, 0); }
  50%      { transform: rotate(calc(var(--r) + 0.4deg)) translate3d(1px, -2px, 0); }
}

/* CURSOR v2 — controlled path between cells, drags a ghost cell value */
.frantic-cursor {
  position: absolute;
  z-index: 10;
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.65));
  animation: cursor-path 6s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
  pointer-events: none;
}
.frantic-cursor .cursor-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.frantic-cursor .ghost-cell {
  position: absolute;
  top: 12px;
  left: 8px;
  padding: 3px 6px;
  background: rgba(16,185,129,0.92);
  color: #050505;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 8px;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: scale(0.85);
  animation: ghost-cell 6s linear infinite;
}
@keyframes cursor-path {
  0%    { left: 36%; top: 30%; }
  18%   { left: 36%; top: 30%; }
  35%   { left: 64%; top: 56%; }
  55%   { left: 70%; top: 64%; }
  72%   { left: 70%; top: 64%; }
  85%   { left: 14%; top: 76%; }
  100%  { left: 36%; top: 30%; }
}
@keyframes ghost-cell {
  0%, 18% { opacity: 0; transform: scale(0.85); }
  22%, 50% { opacity: 1; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(0.85); }
}

/* ---------- CALM: WhatsApp scene ---------- */
.whatsapp-stage { isolation: isolate; }

.wa-bubble {
  position: absolute;
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  opacity: 0;
  animation: wa-cycle 9s var(--ease-soft) infinite;
  will-change: transform, opacity;
}
.wa-in {
  left: 14px;
  top: 14px;
  border-bottom-left-radius: 4px;
}
.wa-out {
  right: 14px;
  top: 90px;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  border-bottom-right-radius: 4px;
  animation-delay: 1.6s;
}
@keyframes wa-cycle {
  0%       { opacity: 0; transform: translateY(8px); }
  6%, 60%  { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(-4px); }
}

.wa-typing {
  position: absolute;
  left: 14px;
  top: 96px;
  display: flex;
  gap: 4px;
  padding: 9px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: wa-typing-cycle 9s linear infinite;
}
.wa-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 246, 247, 0.5);
  animation: typing-dot 1s ease-in-out infinite;
}
.wa-typing span:nth-child(2) { animation-delay: 0.15s; }
.wa-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes wa-typing-cycle {
  0%, 11%   { opacity: 0; }
  12%, 17%  { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes typing-dot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.wa-status {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
}
.wa-status li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: #34d399;
  opacity: 0;
  animation: wa-status-in 9s linear infinite;
  white-space: nowrap;
}
.wa-status .check {
  font-weight: 700;
  color: #10b981;
}
.wa-status li:nth-child(1) { animation-delay: 4.0s; }
.wa-status li:nth-child(2) { animation-delay: 4.5s; }
.wa-status li:nth-child(3) { animation-delay: 5.0s; }
.wa-status li:nth-child(4) { animation-delay: 5.5s; }
@keyframes wa-status-in {
  0%, 38%   { opacity: 0; transform: translateX(8px); }
  44%, 78%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(-4px); }
}

/* Reduced motion: freeze the scenes (still visible, no animation) */
@media (prefers-reduced-motion: reduce) {
  .chaos-stage .sheet,
  .chaos-stage .sheet-status,
  .frantic-cursor,
  .frantic-cursor .ghost-cell,
  .wa-bubble,
  .wa-typing,
  .wa-status li { animation: none; opacity: 1; }
  .wa-bubble { transform: none; }
  .wa-typing { display: none; }
  .frantic-cursor { left: 36%; top: 30%; }
  .frantic-cursor .ghost-cell { opacity: 1; transform: scale(1); }
}

/* ============================================================
   BENTO MINI-SCENES
   ============================================================ */

/* ---------- Mini dashboard mockup (Card 1: Software sob medida) ---------- */
.dash-mockup {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 240px;
  border-radius: 14px;
  background: rgba(8, 9, 11, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 14px 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: rotate(2deg);
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  animation: dash-float 6s ease-in-out infinite;
  will-change: transform;
}
.dash-mockup .dash-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(16,185,129,0.4) 50%, rgba(255,255,255,0.12));
  background-size: 220% 100%;
  margin-bottom: 12px;
  animation: dash-shimmer 3.4s linear infinite;
}
.dash-mockup .dash-rows {
  display: grid;
  gap: 7px;
}
.dash-mockup .dash-row {
  height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
}
.dash-mockup .dash-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--w);
  background: linear-gradient(90deg, #10b981, #34d399);
  transform-origin: left;
  animation: dash-fill 3.6s var(--ease-soft) infinite;
  animation-delay: var(--d);
}
.dash-mockup .dash-pulse {
  position: absolute;
  bottom: 8px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px #10b981;
  animation: pulse-soft 1.6s ease-in-out infinite;
}
@keyframes dash-float {
  0%, 100% { transform: rotate(2deg) translate3d(0, 0, 0); }
  50%      { transform: rotate(1.4deg) translate3d(0, -6px, 0); }
}
@keyframes dash-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes dash-fill {
  0%      { transform: scaleX(0); }
  35%     { transform: scaleX(1); }
  85%     { transform: scaleX(1); }
  100%    { transform: scaleX(0); }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ---------- Orbit (Card 3: O que falta no seu ERP) ---------- */
.orbit-mini { isolation: isolate; }
.orbit-mini .orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  animation: orbit-rotate 24s linear infinite;
}
.orbit-mini .orbit-ring-inner {
  inset: 18px;
  border-color: rgba(16, 185, 129, 0.18);
  animation-direction: reverse;
  animation-duration: 16s;
}
.orbit-mini .planet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 246, 247, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #f5f6f7;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.orbit-mini .orbit-spin {
  position: absolute;
  inset: 0;
  animation: orbit-rotate 8s linear infinite;
}
.orbit-mini .orbit-spin::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 14px #10b981, 0 0 4px #10b981;
}
.orbit-mini .orbit-spin-fast {
  inset: 14px;
  animation-duration: 5s;
  animation-direction: reverse;
}
.orbit-mini .orbit-spin-fast::before {
  width: 8px;
  height: 8px;
  margin-left: -4px;
  top: -4px;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
}
@keyframes orbit-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- Auto-checklist (Card 4: Trabalho braçal automatizado) ---------- */
.auto-checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.auto-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 246, 247, 0.85);
  position: relative;
}
.auto-checklist .task-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transition: all 0.4s var(--ease-soft);
}
.auto-checklist .task-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #050505;
  border-bottom: 2px solid #050505;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  opacity: 0;
}
.auto-checklist .task-text {
  position: relative;
}
.auto-checklist .task-text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: rgba(245, 246, 247, 0.45);
  transition: width 0.5s var(--ease-soft);
}
.auto-checklist li {
  animation: task-state 8s linear infinite;
}
.auto-checklist li:nth-child(1) { animation-delay: 0.4s; }
.auto-checklist li:nth-child(2) { animation-delay: 1.6s; }
.auto-checklist li:nth-child(3) { animation-delay: 2.8s; }
.auto-checklist li:nth-child(4) { animation-delay: 4.0s; }
.auto-checklist li .task-check {
  animation: check-fill 8s linear infinite;
}
.auto-checklist li:nth-child(1) .task-check { animation-delay: 0.4s; }
.auto-checklist li:nth-child(2) .task-check { animation-delay: 1.6s; }
.auto-checklist li:nth-child(3) .task-check { animation-delay: 2.8s; }
.auto-checklist li:nth-child(4) .task-check { animation-delay: 4.0s; }
.auto-checklist li .task-check::after {
  animation: check-pop 8s linear infinite;
}
.auto-checklist li:nth-child(1) .task-check::after { animation-delay: 0.4s; }
.auto-checklist li:nth-child(2) .task-check::after { animation-delay: 1.6s; }
.auto-checklist li:nth-child(3) .task-check::after { animation-delay: 2.8s; }
.auto-checklist li:nth-child(4) .task-check::after { animation-delay: 4.0s; }
.auto-checklist li .task-text::after {
  animation: text-strike 8s linear infinite;
}
.auto-checklist li:nth-child(1) .task-text::after { animation-delay: 0.4s; }
.auto-checklist li:nth-child(2) .task-text::after { animation-delay: 1.6s; }
.auto-checklist li:nth-child(3) .task-text::after { animation-delay: 2.8s; }
.auto-checklist li:nth-child(4) .task-text::after { animation-delay: 4.0s; }

@keyframes task-state {
  0%, 4%   { color: rgba(245, 246, 247, 0.85); }
  10%, 75% { color: rgba(245, 246, 247, 0.4); }
  82%, 100% { color: rgba(245, 246, 247, 0.85); }
}
@keyframes check-fill {
  0%, 4%   { background: transparent; border-color: rgba(255, 255, 255, 0.2); }
  10%, 75% { background: #10b981; border-color: #10b981; }
  82%, 100% { background: transparent; border-color: rgba(255, 255, 255, 0.2); }
}
@keyframes check-pop {
  0%, 4%    { transform: rotate(45deg) scale(0); opacity: 0; }
  9%, 12%   { transform: rotate(45deg) scale(1.2); opacity: 1; }
  15%, 75%  { transform: rotate(45deg) scale(1); opacity: 1; }
  82%, 100% { transform: rotate(45deg) scale(0); opacity: 0; }
}
@keyframes text-strike {
  0%, 4%   { width: 0; }
  10%, 75% { width: 100%; }
  82%, 100% { width: 0; }
}

/* ============================================================
   PROCESS — top progress strip (fills with section scroll)
   ============================================================ */
.step-progress {
  position: relative;
  height: 2px;
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.step-progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10b981, #34d399);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-soft);
}

/* ============================================================
   Reduced motion overrides for new scenes
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dash-mockup,
  .dash-mockup .dash-bar,
  .dash-mockup .dash-bar-fill,
  .dash-mockup .dash-pulse,
  .orbit-mini .orbit-ring,
  .orbit-mini .orbit-spin,
  .auto-checklist li,
  .auto-checklist .task-check,
  .auto-checklist .task-check::after,
  .auto-checklist .task-text::after { animation: none; }
  .auto-checklist .task-check { background: #10b981; border-color: #10b981; }
  .auto-checklist .task-check::after { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ============================================================
   LOGO MARK — pixel particles rising (subtle infinite loop)
   ============================================================ */
.logo-mark .px {
  transform-origin: center;
  animation: logo-pixel 3.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.logo-mark .px-1 { animation-delay: 0s;    }
.logo-mark .px-2 { animation-delay: 0.35s; }
.logo-mark .px-3 { animation-delay: 0.7s;  }
.logo-mark .px-4 { animation-delay: 1.05s; }
@keyframes logo-pixel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  40%      { transform: translateY(-2.5px); opacity: 0.5; }
  60%      { transform: translateY(-1px);   opacity: 1; }
}
.logo-mark:hover .px {
  animation-duration: 1.6s;
}

/* ============================================================
   DIFERENCIAIS — animated icons
   ============================================================ */
.diff-icon {
  width: 38px;
  height: 38px;
  display: block;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.25));
}

/* DRE bars: pulse heights */
.icon-bars .bar { transform-origin: bottom; animation: bar-pulse 2.6s ease-in-out infinite; }
.icon-bars .bar-1 { animation-delay: 0s; }
.icon-bars .bar-2 { animation-delay: 0.18s; }
.icon-bars .bar-3 { animation-delay: 0.36s; }
@keyframes bar-pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.55); }
}

/* Padlock: shackle drops & locks */
.icon-lock .shackle {
  transform-origin: center 14px;
  animation: shackle-snap 4s cubic-bezier(0.55, 0, 0.4, 1.4) infinite;
}
@keyframes shackle-snap {
  0%, 25%   { transform: translateY(-3px); }
  35%, 60%  { transform: translateY(0); }
  62%       { transform: translateY(0.5px); }
  64%, 95%  { transform: translateY(0); }
  100%      { transform: translateY(-3px); }
}

/* Key: bow + shaft draw themselves */
.icon-key .key-bow {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: key-bow-draw 4s ease-in-out infinite;
}
.icon-key .key-shaft {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: key-shaft-draw 4s ease-in-out infinite;
  animation-delay: 0.4s;
}
.icon-key .key-teeth {
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: key-shaft-draw 4s ease-in-out infinite;
  animation-delay: 0.7s;
}
.icon-key .key-eye {
  opacity: 0;
  animation: key-eye-pop 4s ease-in-out infinite;
  animation-delay: 0.3s;
}
@keyframes key-bow-draw {
  0%, 8%   { stroke-dashoffset: 32; }
  35%, 75% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: -32; }
}
@keyframes key-shaft-draw {
  0%, 5%   { stroke-dashoffset: 14; }
  30%, 75% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: -14; }
}
@keyframes key-eye-pop {
  0%, 15% { opacity: 0; }
  25%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Online: concentric rings pulsing outward */
.icon-online .ring { transform-origin: 16px 16px; animation: ring-pulse 2.4s ease-out infinite; }
.icon-online .ring-1 { animation-delay: 0s; }
.icon-online .ring-2 { animation-delay: 0.4s; }
.icon-online .ring-3 { animation-delay: 0.8s; }
@keyframes ring-pulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
   NAV — active section highlight
   ============================================================ */
.nav-pill { position: relative; }
.nav-pill.is-active {
  color: #f5f6f7;
  background: rgba(16, 185, 129, 0.10);
}
.nav-pill.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 16px;
  height: 1px;
  background: #10b981;
  transform: translateX(-50%);
  border-radius: 1px;
}

/* ============================================================
   CTA — live mini-chat preview
   ============================================================ */
.cta-chat { position: relative; isolation: isolate; }
.cta-bubble {
  position: relative;
  max-width: 90%;
  padding: 9px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(245, 246, 247, 0.9);
  opacity: 0;
  animation: cta-bubble-cycle 9s var(--ease-soft) infinite;
  will-change: transform, opacity;
}
.cta-bubble-in {
  border-bottom-left-radius: 4px;
  margin-bottom: 6px;
}
.cta-bubble-out {
  margin-left: auto;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  border-bottom-right-radius: 4px;
  color: #f5f6f7;
  animation-delay: 1.8s;
}
@keyframes cta-bubble-cycle {
  0%       { opacity: 0; transform: translateY(8px); }
  6%, 70%  { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(-4px); }
}
.cta-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: cta-typing-cycle 9s linear infinite;
}
.cta-typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245, 246, 247, 0.5);
  animation: typing-dot 1s ease-in-out infinite;
}
.cta-typing span:nth-child(2) { animation-delay: 0.15s; }
.cta-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cta-typing-cycle {
  0%, 13%   { opacity: 0; }
  14%, 19%  { opacity: 1; }
  21%, 100% { opacity: 0; }
}

/* Reduced motion overrides for new bits */
@media (prefers-reduced-motion: reduce) {
  .icon-bars .bar,
  .icon-lock .shackle,
  .icon-key .key-bow,
  .icon-key .key-shaft,
  .icon-key .key-teeth,
  .icon-key .key-eye,
  .icon-online .ring,
  .cta-bubble,
  .cta-typing { animation: none; }
  .cta-bubble { opacity: 1; transform: none; }
  .cta-typing { display: none; }
  .icon-key .key-bow,
  .icon-key .key-shaft,
  .icon-key .key-teeth { stroke-dashoffset: 0; }
  .icon-key .key-eye { opacity: 1; }
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- Mobile menu open state ---------- */
#mobileMenu.is-open {
  visibility: visible;
  opacity: 1;
}
#mobileMenu .menu-link {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}
#mobileMenu.is-open .menu-link {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#mobileMenu.is-open .menu-link:nth-child(1) { transition-delay: 0.08s; }
#mobileMenu.is-open .menu-link:nth-child(2) { transition-delay: 0.14s; }
#mobileMenu.is-open .menu-link:nth-child(3) { transition-delay: 0.20s; }
#mobileMenu.is-open .menu-link:nth-child(4) { transition-delay: 0.26s; }
#mobileMenu.is-open .menu-link:nth-child(5) { transition-delay: 0.32s; }
#mobileMenu.is-open .menu-link:nth-child(6) { transition-delay: 0.38s; }

/* ---------- FAQ details (no awkward marker arrow) ---------- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { user-select: none; }

/* ---------- Focus ring (accessibility) ---------- */
:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible,
a:focus-visible {
  outline-color: #10b981;
}

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  [data-float] { animation: none; }
  [data-tilt] { transform: none; }
  [data-halo]::before { display: none; }
  body::before { display: none; }
  .blob-1, .blob-2, .blob-3 | { animation: none; }
  .dot-grid { animation: none; }
  .animate-\[marquee_42s_linear_infinite\] { animation: none; }
}