/* =========================================================================
   MirAI — Catálogo de Plataformas
   Tema CLARO (fundo branco) + casca "MirAI" verde + temas por produto.
   Painéis de produto (.product-visual) permanecem escuros (vitrine).
   ========================================================================= */

/* ----------------------------- Tokens / Brand ---------------------------- */
:root {
  /* Superfícies (claro, branco esverdeado suave) --------------------------- */
  --bg: #f6faf1;
  --bg-2: #eef5e4;
  --surface: #ffffff;
  --surface-2: #f1f7ea;
  --line: rgba(11, 20, 11, 0.10);
  --line-strong: rgba(11, 20, 11, 0.20);

  /* Tinta (texto escuro) --------------------------------------------------- */
  --ink: #0c140c;
  --ink-soft: #38453a;
  --ink-muted: #5e6c61;

  /* Marca MirAI (verde/branco) -------------------------------------------- */
  --brand: #84e80e;          /* lime vivo — preenchimentos/botões (texto escuro) */
  --brand-strong: #3c8d10;   /* verde legível — texto/linhas sobre claro        */
  --brand-2: #00a85a;        /* emerald                                          */
  --brand-3: #ffffff;        /* branco                                           */
  --brand-grad: linear-gradient(110deg, #3c8d10 0%, #00a85a 100%);

  /* Tema por seção (sobrescrito por [data-brand]) -------------------------- */
  --theme: var(--brand);
  --theme-accent: var(--brand-strong);
  --theme-2: var(--brand-2);
  --theme-ink: #06140a;
  --theme-surface: #101510;          /* painel-vitrine escuro */
  --theme-display: "Space Grotesk", "Inter", sans-serif;

  /* Type ------------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Metrics ---------------------------------------------------------------- */
  --maxw: 1180px;
  --radius: 18px;
  --radius-lg: 28px;
  --pad-section: clamp(72px, 10vw, 140px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Temas de produto — escopo via data-brand -------------------------------- */
[data-brand="hellogrowth"] {
  --theme: #83e509;
  --theme-accent: #2e7d32;
  --theme-2: #00c758;
  --theme-ink: #0a0d07;
  --theme-surface: #11140c;
  --theme-display: "Sora", "Inter", sans-serif;
}
[data-brand="kaivaa"] {
  --theme: #ffde43;
  --theme-accent: #d9534a;
  --theme-2: #e06a5e;
  --theme-ink: #1d1c1a;
  --theme-surface: #1a1916;
  --theme-display: "Bricolage Grotesque", "Inter", sans-serif;
}
[data-brand="mirai"] {
  --theme: var(--brand);
  --theme-accent: var(--brand-strong);
  --theme-2: var(--brand-2);
  --theme-ink: #06140a;
  --theme-surface: #101510;
  --theme-display: "Space Grotesk", "Inter", sans-serif;
}

/* ------------------------------- Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Glow verde ambiente, fixo, suaviza o branco ao longo de todo o site ------ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background:
    radial-gradient(38% 32% at 10% 12%, rgba(132, 232, 14, 0.14), transparent 70%),
    radial-gradient(42% 36% at 90% 26%, rgba(0, 168, 90, 0.12), transparent 70%),
    radial-gradient(46% 38% at 22% 62%, rgba(132, 232, 14, 0.10), transparent 72%),
    radial-gradient(48% 40% at 82% 84%, rgba(0, 168, 90, 0.10), transparent 72%);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------ Layout ----------------------------------- */
.wrap { width: min(var(--maxw), 92vw); margin-inline: auto; }
section { position: relative; padding-block: var(--pad-section); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--theme-accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: var(--theme-accent); opacity: 0.9;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.h-display { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.h-section { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* ------------------------------ Buttons ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--theme); color: var(--theme-ink); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px var(--theme-accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--theme-accent); color: var(--theme-accent); transform: translateY(-3px); }
.btn-wa { background: #25d366; color: #04210f; }
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(37, 211, 102, 0.7); }

/* ------------------------------- Navbar ---------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 48px);
  transition: background 0.3s, border-color 0.3s, padding 0.3s, box-shadow 0.3s, opacity 0.4s ease, transform 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.nav-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) and (update: none) { .nav { transition: opacity 0.2s ease; } .nav.nav-hidden { transform: none; } }
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -22px rgba(11, 20, 11, 0.5);
  padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--ink); }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-logo--lg { height: clamp(40px, 5vw, 54px); }
.brand .kanji { color: var(--brand-strong); font-weight: 500; }
.brand .logo-dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-grad);
  display: grid; place-items: center; color: #fff; font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 6px 18px -8px var(--brand-strong);
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.92rem; color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover { color: var(--brand-strong); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn:not(.btn-wa) { display: none; }
}

/* ------------------------------- Hero ------------------------------------ */
.hero {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding-top: 120px; padding-bottom: 90px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(60% 56% at 50% -4%, rgba(132, 232, 14, 0.34), transparent 64%),
    radial-gradient(46% 44% at 12% 28%, rgba(0, 168, 90, 0.24), transparent 62%),
    radial-gradient(46% 44% at 90% 44%, rgba(132, 232, 14, 0.24), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -3; opacity: 0.7;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.hero-fx { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.hero-kanji {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: min(46vh, 42vw); line-height: 1;
  white-space: nowrap; letter-spacing: 0.04em;
  color: var(--brand-2); opacity: 0.16; pointer-events: none; z-index: -1; font-weight: 700;
  text-shadow: 0 0 70px rgba(0, 168, 90, 0.35);
}
.hero-inner { max-width: 900px; margin-inline: auto; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin: 0 auto 38px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px;
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line-strong);
  background: rgba(11, 20, 11, 0.03); font-size: 0.82rem; color: var(--ink-soft);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-strong); box-shadow: 0 0 0 4px rgba(60, 141, 16, 0.16); }

/* Termo "futuro" — efeito cyber/glitch (troca para 未来 e volta) ----------- */
.glitch {
  font-family: "Orbitron", var(--font-display); font-weight: 800;
  display: inline-block; min-width: 4ch; text-align: center;
  background: linear-gradient(110deg, #2f8a0a, #00c46a 55%, #6ef33a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.02em; text-shadow: 0 0 26px rgba(0, 196, 106, 0.35);
  position: relative;
}
.glitch .dud { color: var(--brand-2); -webkit-text-fill-color: var(--brand-2); opacity: 0.85; }

/* Seta/indicador de rolagem ----------------------------------------------- */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 13px 24px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 10px 30px -18px rgba(11, 20, 11, 0.5);
  transition: transform 0.25s var(--ease), border-color 0.25s, color 0.25s, box-shadow 0.25s, background 0.25s;
}
.scroll-cue:hover {
  transform: translateY(-2px); border-color: var(--brand-strong); color: var(--brand-strong);
  background: rgba(255, 255, 255, 0.8); box-shadow: 0 16px 34px -18px var(--brand-strong);
}
.scroll-cue .chev { width: 20px; height: 20px; animation: cueBounce 1.8s var(--ease) infinite; }
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (update: none) { .scroll-cue .chev { animation: none; } }

/* ---------------------------- Generic cards ------------------------------ */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  box-shadow: 0 14px 40px -34px rgba(11, 20, 11, 0.5);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 50px -34px rgba(11, 20, 11, 0.5); }
.card .num { font-family: var(--font-display); font-size: 0.8rem; color: var(--theme-accent); font-weight: 600; letter-spacing: 0.1em; }
.card h3 { font-size: 1.28rem; margin: 14px 0 10px; }
.card p { color: var(--ink-muted); font-size: 0.98rem; }
.card .ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--theme-accent) 14%, transparent); color: var(--theme-accent); margin-bottom: 18px;
}
.card .ic svg { width: 22px; height: 22px; }

/* ------------------------------- Section head ---------------------------- */
.s-head { max-width: 760px; margin-bottom: 56px; }
.s-head .eyebrow { margin-bottom: 18px; }
.s-head .lede { margin-top: 18px; }

/* --------------------- "Por quê": grade + painel visual ------------------ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
@media (max-width: 940px) { .why-grid { grid-template-columns: 1fr; } }
.why-grid .eyebrow { margin-bottom: 18px; }
.why-grid .lede { margin-top: 18px; }

/* Box único da animação (maior, sem box-dentro-de-box) */
.transform-panel {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 540px;
  border-radius: var(--radius-lg); overflow: hidden; background: #0a120c;
  border: 1px solid color-mix(in oklab, var(--brand) 28%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 30px 60px -34px rgba(11, 20, 11, 0.6);
}
.transform-panel::before {
  content: ""; position: absolute; right: -22%; top: -22%; width: 64%; height: 64%; z-index: 1;
  background: radial-gradient(circle, var(--brand), transparent 70%); opacity: 0.14; filter: blur(42px); pointer-events: none;
}
.oc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.tp-era {
  position: absolute; z-index: 3; font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.tp-era--past { bottom: 14px; left: 14px; color: rgba(255, 255, 255, 0.66); }
.tp-era--future { top: 14px; right: 14px; color: var(--brand); }

.tp-caption { margin-top: 20px; text-align: center; }
.tp-legend { color: var(--ink-soft); font-size: 0.98rem; font-family: var(--font-display); }
.tp-quote { color: var(--theme-accent); font-size: 1rem; margin-top: 12px; }
.tp-quote em { font-style: italic; }
.tp-author { color: var(--ink-muted); font-size: 0.84rem; font-family: var(--font-display); letter-spacing: 0.04em; margin-top: 4px; }
.tp-author::before { content: ""; }

/* ------------------------- "Como fazemos": fundo FX ---------------------- */
.s-head.center { margin-inline: auto; }
.como { overflow: hidden; }
.como > .wrap { position: relative; z-index: 1; }
.como-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 0%, rgba(132, 232, 14, 0.10), transparent 62%);
}
.como-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#dores { padding-block: 0; }
#solucoes { padding-top: clamp(6px, 1.2vw, 14px); position: relative; isolation: isolate; scroll-margin-top: 12px; }
#solucoes .s-head { margin-bottom: clamp(56px, 6.5vw, 96px); }
#solucoes .s-head .eyebrow { margin-bottom: 10px; }

/* "calmaria depois da tempestade": clarão suave verde respirando ao entrar */
#solucoes::before {
  content: ""; position: absolute; inset: -10% 0 auto 0; height: 60%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(132, 232, 14, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(0, 168, 90, 0.10), transparent 55%);
  animation: calmGlow 7s ease-in-out infinite;
}
@keyframes calmGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.calm-fx { position: absolute; top: 0; left: 0; width: 100%; height: min(58vh, 520px); z-index: -1; pointer-events: none; }
/* entrada serena do cabeçalho (mais lenta e suave que o reveal padrão) */
#solucoes .s-head.reveal { transform: translateY(34px); filter: blur(6px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease); }
#solucoes .s-head.reveal.in { filter: blur(0); }
#solucoes .s-head .eyebrow { color: var(--brand-2); }
#solucoes .s-head .accent-fade { color: var(--brand-strong); opacity: 0; }
#solucoes .s-head.reveal.in .accent-fade { animation: fadeInSoft 1.6s ease 0.55s forwards; }
@keyframes fadeInSoft { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) and (update: none) { #solucoes .s-head .accent-fade { opacity: 1; } }
@media (prefers-reduced-motion: reduce) and (update: none) {
  #solucoes::before { animation: none; }
  #solucoes .s-head.reveal { filter: none; transition: none; }
}
#dores > .wrap { position: relative; z-index: 1; }
.dores-pin-wrap { position: relative; height: 280vh; background: #04070a; }
.dores-pin {
  position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(44% 52% at 50% 50%, rgba(132, 232, 14, 0.18), transparent 72%),
    radial-gradient(130% 100% at 50% 0%, #0a1410 0%, #04070a 72%);
}
.dores-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dores-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dores-stage { position: relative; z-index: 1; text-align: center; padding-inline: 18px; }
.dores-stage .eyebrow { justify-content: center; margin-bottom: clamp(24px, 5vh, 46px); color: #9be25a; }
.dores-stage .eyebrow::before { background: #9be25a; }
.reveal-lines {
  display: flex; flex-direction: column; gap: clamp(0.32em, 1.4vh, 0.6em); max-width: 20ch; margin-inline: auto;
  font-family: "Chakra Petch", var(--font-display), sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, min(4.6vw, 5vh), 3.4rem); line-height: 1.12; letter-spacing: 0.005em;
}
.reveal-lines .rl { display: block; color: rgba(255, 255, 255, 0.95); opacity: 0.16; filter: blur(7px); transition: opacity 0.12s linear, filter 0.12s linear; }
.reveal-lines .rl-strong { color: #aef06a; text-shadow: 0 0 34px rgba(132, 232, 14, 0.6); white-space: nowrap; margin-top: 0.25em; font-weight: 700; }
.dores-cue { margin-top: clamp(26px, 5vh, 48px); color: rgba(255, 255, 255, 0.5); transition: opacity 0.3s; }

/* Glitch "erro" (separação RGB) reutilizável */
.glitchfx { position: relative; }
.glitchfx::before, .glitchfx::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: hidden; }
.glitchfx::before { color: #16d6ff; animation: cyberA 3s steps(1) infinite; }
.glitchfx::after { color: #ff3bd4; animation: cyberB 3.6s steps(1) infinite; }
/* versão mais forte (frase de impacto) */
.glitchfx--strong::before { color: #16d6ff; animation: crashA 2s steps(1) infinite; }
.glitchfx--strong::after { color: #ff3bd4; animation: crashB 2.4s steps(1) infinite; }
@keyframes crashA {
  0%, 78%, 100% { clip-path: inset(0 0 101% 0); transform: translate(0, 0); }
  80% { clip-path: inset(6% 0 70% 0); transform: translate(-6px, -2px); }
  84% { clip-path: inset(40% 0 28% 0); transform: translate(6px, 1px); }
  88% { clip-path: inset(18% 0 58% 0); transform: translate(-5px, 2px); }
  92% { clip-path: inset(62% 0 10% 0); transform: translate(4px, -1px); }
}
@keyframes crashB {
  0%, 76%, 100% { clip-path: inset(101% 0 0 0); transform: translate(0, 0); }
  79% { clip-path: inset(58% 0 16% 0); transform: translate(6px, 2px); }
  83% { clip-path: inset(28% 0 50% 0); transform: translate(-6px, -2px); }
  90% { clip-path: inset(74% 0 6% 0); transform: translate(5px, 1px); }
}
@media (prefers-reduced-motion: reduce) and (update: none) { .glitchfx::before, .glitchfx::after, .glitchfx--strong::before, .glitchfx--strong::after { animation: none; clip-path: inset(0 0 101% 0); } }

/* Crash de tela (ao revelar a frase final) */
.crash-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.35) 2px 3px),
    linear-gradient(90deg, rgba(22, 214, 255, 0.35), transparent 42%, transparent 58%, rgba(255, 59, 212, 0.35));
}
.dores-pin.crash { animation: screenCrash 0.6s steps(2, end) 1; }
.dores-pin.crash .crash-overlay { animation: crashFlash 0.6s steps(1) 1; }
@keyframes screenCrash {
  0% { transform: translate(0, 0); filter: none; }
  10% { transform: translate(-2px, 1px); filter: saturate(1.5) hue-rotate(18deg); }
  24% { transform: translate(2px, -1px); filter: invert(0.25); }
  42% { transform: translate(-1.5px, 1px); filter: saturate(1.3); }
  60% { transform: translate(1.5px, 1px); filter: none; }
  80% { transform: translate(-1px, -0.5px); }
  100% { transform: translate(0, 0); filter: none; }
}
@keyframes crashFlash { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: 0.2; } 38% { opacity: 1; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) and (update: none) { .dores-pin.crash, .dores-pin.crash .crash-overlay { animation: none; } }

/* Finale "SYSTEM FAILURE" cyberpunk -------------------------------------- */
.dores-finale {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; overflow: hidden;
  font-family: "Chakra Petch", monospace;
}
.err-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92%, 820px); text-align: center; display: flex; flex-direction: column; gap: clamp(10px, 2.4vh, 22px); align-items: center;
}
.err-404 {
  font-weight: 700; font-size: clamp(0.82rem, 2.1vw, 1.2rem); letter-spacing: 0.32em; text-transform: uppercase;
  color: #ff0030; text-shadow: 0 0 22px rgba(255, 0, 48, 0.8); position: relative;
}
.err-title {
  font-family: "Chakra Petch", var(--font-display), sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.3rem, 7.8vw, 5.6rem); line-height: 1; letter-spacing: 0.01em;
  color: #fff; text-shadow: 0 0 28px rgba(255, 0, 48, 0.9), 0 0 70px rgba(255, 0, 48, 0.5);
  max-width: 18ch; margin-inline: auto;
}
.err-sub {
  font-family: "Chakra Petch", var(--font-display), sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(0.85rem, 1.8vw, 1.25rem); letter-spacing: 0.04em; color: #ff5470;
  text-shadow: 0 0 16px rgba(255, 0, 48, 0.6);
}
/* caveira central gigante (assustadora) */
.sk-main {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(54vmin, 440px); aspect-ratio: 760 / 1261; z-index: -1; opacity: 0.82;
  background: url("../img/skull.png") center / contain no-repeat;
  mix-blend-mode: screen; pointer-events: none;
  animation: skMain 2.4s steps(1) infinite;
}
@keyframes skMain { 0%, 88%, 100% { opacity: 0.85; } 90% { opacity: 0.3; } 93% { opacity: 1; } 96% { opacity: 0.55; } }
/* caveiras de canto */
.sk { position: absolute; width: clamp(40px, 6vw, 88px); height: auto; color: #ff0030; filter: drop-shadow(0 0 16px currentColor); animation: skFlick 1.1s steps(1) infinite; }
.sk1 { left: 7%; top: 18%; }
.sk2 { right: 8%; bottom: 22%; color: #c81e3a; animation-duration: 1.6s; }
@keyframes skFlick { 0%, 70%, 100% { opacity: 0.85; } 72% { opacity: 0.12; } 76% { opacity: 0.85; } 90% { opacity: 0.35; } }
/* caixas de erro */
.errbox {
  position: absolute; border: 1px solid currentColor; padding: 8px 12px; background: rgba(10, 2, 4, 0.62);
  color: #ff0030; font-size: clamp(0.55rem, 1.1vw, 0.74rem); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 0 18px -3px currentColor, inset 0 0 22px -14px currentColor; line-height: 1.5;
}
.errbox b { display: block; font-weight: 700; }
.errbox span { display: block; opacity: 0.85; }
.errbox .bar { display: block; height: 9px; margin-top: 6px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px, currentColor 3px 6px, transparent 6px 7px); opacity: 0.85; }
.eb1 { left: 3.5%; top: 7%; color: #16d6ff; }
.eb2 { left: 5%; top: 44%; color: #ff0030; animation: errBlink 1.5s steps(1) infinite; }
.eb3 { right: 4%; top: 11%; color: #ff0030; }
.eb4 { right: 5%; bottom: 10%; color: #ff3b6b; }
.eb5 { left: 4%; bottom: 5%; color: #ff0030; }
.eb6 { right: 6%; top: 46%; color: #ff5470; }
.eb7 { left: 4%; bottom: 22%; color: #ff0030; animation: errBlink 1.8s steps(1) infinite; }
.eb8 { right: 4%; bottom: 30%; color: #16d6ff; }
.eb9 { left: 30%; top: 9%; color: #ff0030; animation: errBlink 2.2s steps(1) infinite; }
@keyframes errBlink { 0%, 64%, 100% { opacity: 0.9; } 66% { opacity: 0.2; } 70% { opacity: 0.9; } 84% { opacity: 0.3; } 88% { opacity: 0.9; } }
@media (max-width: 860px) {
  .sk { display: none; }
  .sk-main { opacity: 0.85; width: 118vmin; top: 44%; }
  /* mantém só algumas janelas de erro, reposicionadas pra caber */
  .errbox { display: none; }
  .eb1, .eb3, .eb5 { display: block; font-size: 0.6rem; padding: 6px 9px; }
  .eb1 { left: 3%; top: 5%; } .eb3 { right: 3%; top: 7%; } .eb5 { left: 4%; bottom: 6%; }
  .err-title { font-size: clamp(2rem, 11vw, 3.2rem); }
}

/* Tela "HACKEADA" durante o finale (crash agressivo) --------------------- */
.dores-pin.glitch-on { animation: pinShake 0.12s steps(2, end) infinite, pinFlash 0.85s steps(1, end) infinite; }
.dores-pin.glitch-on .crash-overlay { opacity: 1; animation: crashFlicker 0.16s steps(2) infinite; }
.dores-pin.glitch-on .err-title::before, .dores-pin.glitch-on .err-title::after { animation-duration: 0.35s; }
@keyframes pinShake {
  0% { transform: translate(-0.8px, 0.5px); }
  25% { transform: translate(1px, -0.5px); }
  50% { transform: translate(-1px, -0.5px); }
  75% { transform: translate(0.8px, 0.5px); }
  100% { transform: translate(1px, -0.5px); }
}
@keyframes pinFlash {
  0%, 86%, 100% { filter: none; }
  88% { filter: invert(0.22); }
  92% { filter: contrast(1.3) saturate(1.4); }
}
@keyframes crashFlicker { 0% { opacity: 0.08; } 50% { opacity: 0.28; } 100% { opacity: 0.07; } }

/* Janela falsa de "REBOOT" (clicável) — única saída da tela */
.err-reboot {
  pointer-events: auto; margin-top: clamp(10px, 2.4vh, 22px); display: inline-flex; flex-direction: column; gap: 10px;
  border: 1px solid #16d6ff; background: rgba(8, 4, 14, 0.78); padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 30px);
  width: min(92vw, 480px); box-shadow: 0 0 34px -2px #16d6ff; color: #cdebff; text-transform: uppercase; letter-spacing: 0.08em;
  animation: rebootPulse 1.4s ease-in-out infinite;
}
.erb-title { font-size: 0.72rem; color: #16d6ff; letter-spacing: 0.2em; border-bottom: 1px solid rgba(22, 214, 255, 0.4); padding-bottom: 8px; }
.erb-msg { font-size: 0.95rem; color: #fff; }
.erb-btn {
  align-self: stretch; text-align: center; margin-top: 6px; padding: clamp(14px, 2vw, 18px) 16px;
  font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.3rem); letter-spacing: 0.06em;
  color: #04210f; background: #16d6ff; border-radius: 4px; transition: background 0.2s, transform 0.12s;
}
.erb-hint { font-size: 0.72rem; color: #8fe3ff; letter-spacing: 0.12em; opacity: 0.9; }
.err-reboot:hover .erb-btn { background: #6ef0ff; transform: translateY(-2px) scale(1.02); }
.err-reboot:active .erb-btn { transform: translateY(0) scale(0.99); }
@keyframes rebootPulse {
  0%, 100% { box-shadow: 0 0 28px -4px #16d6ff; }
  50% { box-shadow: 0 0 50px 2px #16d6ff; }
}
@media (prefers-reduced-motion: reduce) and (update: none) { .err-reboot { animation: none; } }

@media (prefers-reduced-motion: reduce) and (update: none) {
  .dores-pin.glitch-on { animation: none; }
  .dores-pin.glitch-on .crash-overlay { animation: none; opacity: 0.25; }
  .sk, .errbox { animation: none; }
}
.dores-cue svg { width: 28px; height: 28px; margin-inline: auto; animation: cueBounce 1.8s var(--ease) infinite; }
.dores-bridge { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); margin: 0 auto 44px; padding-top: var(--pad-section); }
@media (prefers-reduced-motion: reduce) and (update: none) {
  .dores-pin-wrap { height: auto; }
  .dores-pin { position: static; height: auto; padding-block: var(--pad-section); }
  .reveal-lines .rl { opacity: 1; filter: none; }
  .dores-cue { display: none; }
}

/* ------------------------ "Como fazemos": roadmap ----------------------- */
.layers { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); position: relative; }
@media (max-width: 820px) { .layers { grid-template-columns: 1fr; } }
.layers::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 108px; height: 0;
  border-top: 2px dashed color-mix(in oklab, var(--brand) 55%, transparent); z-index: 0; opacity: 0.55;
}
@media (max-width: 820px) { .layers::before { display: none; } }
.layer {
  position: relative; padding: 30px 28px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 234, 0.86));
  border: 1px solid var(--line); backdrop-filter: blur(4px);
  box-shadow: 0 14px 40px -34px rgba(11, 20, 11, 0.5);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.layer:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); box-shadow: 0 26px 50px -34px rgba(11, 20, 11, 0.5); }
.layer-num {
  position: absolute; right: 8px; bottom: -22px; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 8.5rem; line-height: 1; letter-spacing: -0.05em;
  color: var(--brand-strong); opacity: 0.22;
}
.layer:hover .layer-num { opacity: 0.3; }
.layer-body { position: relative; z-index: 1; }
.layer .bar { width: 38px; height: 4px; border-radius: 4px; background: var(--brand-grad); margin-bottom: 20px; }
.layer h3 { font-size: 1.2rem; margin-bottom: 10px; }
.layer p { color: var(--ink-muted); font-size: 0.96rem; }

/* ----------------------- "O que fazemos": layout ------------------------ */
.type-green { color: var(--brand-strong); display: inline-block; position: relative; white-space: nowrap; }
.type-green .dud { color: #bdf57a; }
.type-green.cyber-on { text-shadow: 0 0 12px rgba(132, 232, 14, 0.35); }
.type-green.cyber-on::before, .type-green.cyber-on::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none;
}
.type-green.cyber-on::before { color: #16d6ff; animation: cyberA 3.4s steps(1) infinite; }
.type-green.cyber-on::after { color: #ff3bd4; animation: cyberB 4.1s steps(1) infinite; }
@keyframes cyberA {
  0%, 88%, 100% { clip-path: inset(0 0 101% 0); transform: translate(0, 0); }
  90% { clip-path: inset(8% 0 74% 0); transform: translate(-3px, 0); }
  93% { clip-path: inset(46% 0 30% 0); transform: translate(3px, 0); }
  96% { clip-path: inset(22% 0 60% 0); transform: translate(-2px, 0); }
}
@keyframes cyberB {
  0%, 86%, 100% { clip-path: inset(101% 0 0 0); transform: translate(0, 0); }
  89% { clip-path: inset(64% 0 18% 0); transform: translate(3px, 0); }
  92% { clip-path: inset(30% 0 52% 0); transform: translate(-3px, 0); }
  97% { clip-path: inset(78% 0 6% 0); transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) and (update: none) { .type-green.cyber-on::before, .type-green.cyber-on::after { animation: none; clip-path: inset(0 0 101% 0); } }

.what-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (max-width: 940px) { .what-grid { grid-template-columns: 1fr; } }
.what-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .what-cards { grid-template-columns: 1fr; } }

.what-visual {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 480px;
  border-radius: var(--radius-lg); overflow: hidden; background: #0a120c;
  border: 1px solid color-mix(in oklab, var(--brand) 28%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 30px 60px -34px rgba(11, 20, 11, 0.6);
}
.what-visual::before, .what-visual::after { content: ""; position: absolute; border-radius: 50%; filter: blur(48px); z-index: 0; pointer-events: none; }
.what-visual::before { width: 64%; height: 64%; left: -14%; top: -12%; background: radial-gradient(circle, rgba(132, 232, 14, 0.32), transparent 66%); animation: wblob1 13s ease-in-out infinite alternate; }
.what-visual::after { width: 62%; height: 62%; right: -16%; bottom: -14%; background: radial-gradient(circle, rgba(0, 178, 95, 0.28), transparent 66%); animation: wblob2 16s ease-in-out infinite alternate; }
@keyframes wblob1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(16%, 10%) scale(1.18); } }
@keyframes wblob2 { from { transform: translate(0, 0) scale(1.12); } to { transform: translate(-14%, -8%) scale(1); } }
.what-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

.wnode { position: absolute; transform: translate(-50%, -50%); text-align: center; z-index: 2; transition: transform 0.4s var(--ease); }
.wnode[data-i="0"] { left: 50%; top: 15%; }
.wnode[data-i="1"] { left: 15%; top: 80%; }
.wnode[data-i="2"] { left: 85%; top: 80%; }
.wn-ic {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-inline: auto;
  background: rgba(132, 232, 14, 0.1); color: var(--brand); border: 1px solid rgba(132, 232, 14, 0.22);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.wn-ic svg { width: 24px; height: 24px; }
.wn-label { display: block; margin-top: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); transition: color 0.4s; }
.wnode.active { transform: translate(-50%, -50%) scale(1.14); }
.wnode.active .wn-ic { background: var(--brand); color: #06140a; border-color: var(--brand); box-shadow: 0 0 26px rgba(132, 232, 14, 0.6); }
.wnode.active .wn-label { color: #cdfaa0; }

.wcore { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; }
.wcore::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(132, 232, 14, 0.35);
  box-shadow: 0 0 32px rgba(132, 232, 14, 0.25); animation: corePulse 2.6s ease-in-out infinite;
}
@keyframes corePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; } 50% { transform: translate(-50%, -50%) scale(1.14); opacity: 0.4; } }
.wc-kanji { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--brand); text-shadow: 0 0 16px rgba(132, 232, 14, 0.5); }
.wc-name { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; color: #fff; }

/* -------------------------------- Stats ---------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr; } }
.stat {
  padding: 34px 30px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden;
  box-shadow: 0 14px 40px -34px rgba(11, 20, 11, 0.5);
}
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease);
}
.stat.in::after { transform: scaleX(1); }
.stat .big { display: flex; align-items: baseline; gap: 9px; font-family: var(--font-display); line-height: 1; flex-wrap: wrap; }
.stat .bignum {
  font-size: clamp(2.6rem, 4.8vw, 3.7rem); font-weight: 700; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat .bigunit { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; }
.cyber-num .dud { -webkit-text-fill-color: #4aa017; color: #4aa017; }
.cyber-phrase { font-family: "Orbitron", var(--font-display); font-weight: 700; color: var(--brand-strong); letter-spacing: 0.01em; }
.stat .lbl { font-weight: 600; margin: 14px 0 6px; font-size: 1.05rem; color: var(--ink); }
.stat p { color: var(--ink-muted); font-size: 0.95rem; }

/* ----------------------------- Examples list ----------------------------- */
.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .examples { grid-template-columns: 1fr; } }
.example {
  display: flex; gap: 18px; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 40px -34px rgba(11, 20, 11, 0.5);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.example:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.example .tag {
  flex: 0 0 auto; align-self: flex-start; font-family: var(--font-display); font-weight: 700;
  font-size: 0.78rem; padding: 6px 12px; border-radius: 100px;
  background: color-mix(in oklab, var(--brand-strong) 14%, transparent); color: var(--brand-strong);
}
.example h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; }
.example p { color: var(--ink-muted); font-size: 0.94rem; }

/* ------------------ Soluções: bifurcação sob medida × pronto ------------- */
.anchor { display: block; position: relative; top: -70px; visibility: hidden; }
section[id], #empresa, #dores, #solucoes { scroll-margin-top: 84px; }

.fork { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 8px; }
@media (max-width: 900px) { .fork { grid-template-columns: 1fr; } }
.fork-col {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -38px rgba(11, 20, 11, 0.5);
}
/* caixas em tonalidades de verde diferentes (sólidas: animação fica ATRÁS) */
.fork-col--ondemand { background: linear-gradient(180deg, #eaf7d8, #f2fbe6); border-color: rgba(132, 232, 14, 0.3); }
.fork-col--ready { background: linear-gradient(180deg, #dff3e7, #ecf8f1); border-color: rgba(0, 168, 90, 0.26); }

/* animações ATRÁS das caixas, uma diferente em cada metade */
.fork > * { position: relative; z-index: 1; }
.fork::before, .fork::after { content: ""; position: absolute; top: -26px; bottom: -26px; z-index: 0; pointer-events: none; border-radius: 26px; }
.fork::before {
  left: -14px; width: calc(50% - 6px);
  background: repeating-linear-gradient(125deg, transparent 0 22px, rgba(132, 232, 14, 0.22) 22px 24px);
  background-size: 100% 260px;
  -webkit-mask: radial-gradient(130% 90% at 50% 50%, #000, transparent 78%); mask: radial-gradient(130% 90% at 50% 50%, #000, transparent 78%);
  animation: forkFlow 8s linear infinite;
}
.fork::after {
  right: -14px; width: calc(50% - 6px);
  background-image: radial-gradient(rgba(0, 168, 90, 0.34) 1.7px, transparent 2px);
  background-size: 24px 24px;
  -webkit-mask: radial-gradient(130% 90% at 50% 50%, #000, transparent 80%); mask: radial-gradient(130% 90% at 50% 50%, #000, transparent 80%);
  animation: forkPulse 4.2s ease-in-out infinite;
}
@keyframes forkFlow { 0% { background-position: 0 0; } 100% { background-position: 0 -260px; } }
@keyframes forkPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) and (update: none) { .fork::before, .fork::after { animation: none; } }
.fork-badge {
  align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 100px;
  background: color-mix(in oklab, var(--brand) 16%, transparent); color: var(--brand-strong);
}
.fork-badge--alt { background: rgba(11, 20, 11, 0.06); color: var(--ink); }
.fork-head h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 14px 0 10px; }
.fork-head p { color: var(--ink-muted); font-size: 0.97rem; }
.fork-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fork-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
}
.fork-item .tag {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  padding: 5px 10px; border-radius: 100px; background: color-mix(in oklab, var(--brand-strong) 14%, transparent); color: var(--brand-strong);
}
.fork-item > span:last-child { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
a.fork-item:hover { border-color: var(--brand-strong); transform: translateX(4px); background: var(--surface-2); }
.fork-col .btn { align-self: flex-start; margin-top: auto; }

/* Coluna "sob demanda" — visual animado ---------------------------------- */
.fork-col--ondemand { text-align: center; align-items: center; gap: 14px; }
.fork-col--ondemand .fork-badge { align-self: center; }
.fork-col--ondemand h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.15; margin: 6px 0 2px; }
.od-caption { color: var(--ink-soft); font-size: 0.92rem; max-width: 34ch; margin-top: auto; }

.od-flow { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; margin: 10px 0 4px; }
.od-node {
  width: min(100%, 340px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;
}
.od-tag, .od-live { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.od-in { border-color: color-mix(in oklab, var(--brand-strong) 30%, var(--line)); }
.od-rot { position: relative; height: 1.7em; overflow: hidden; }
.od-rot span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
  opacity: 0; animation: odRot 12.5s linear infinite;
}
.od-rot span:nth-child(1) { animation-delay: 0s; }
.od-rot span:nth-child(2) { animation-delay: 2.5s; }
.od-rot span:nth-child(3) { animation-delay: 5s; }
.od-rot span:nth-child(4) { animation-delay: 7.5s; }
.od-rot span:nth-child(5) { animation-delay: 10s; }
@keyframes odRot {
  0% { opacity: 0; transform: translateY(70%); }
  3% { opacity: 1; transform: translateY(0); }
  16% { opacity: 1; transform: translateY(0); }
  20% { opacity: 0; transform: translateY(-70%); }
  100% { opacity: 0; transform: translateY(-70%); }
}

/* duto com partícula descendo */
.od-pipe { position: relative; width: 2px; height: 34px; background: linear-gradient(180deg, transparent, var(--line-strong), transparent); }
.od-pipe i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px 2px rgba(132, 232, 14, 0.7); animation: odDrop 1.8s ease-in-out infinite; }
.od-pipe:nth-of-type(4) i { animation-delay: 0.9s; }
@keyframes odDrop { 0% { top: -6px; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* núcleo pulsante */
.od-core {
  position: relative; width: min(100%, 340px); border-radius: 16px; padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(132, 232, 14, 0.14), var(--surface));
  border: 1px solid color-mix(in oklab, var(--brand-strong) 38%, var(--line));
  box-shadow: 0 0 40px -16px rgba(132, 232, 14, 0.7);
}
.od-ring { position: absolute; top: 22px; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(132, 232, 14, 0.55); animation: odPulse 2.6s ease-out infinite; }
.od-ring2 { animation-delay: 1.3s; }
@keyframes odPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
.od-kanji { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--brand-strong); text-shadow: 0 0 22px rgba(132, 232, 14, 0.5); }
.od-brand { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); margin-top: -2px; }
.od-brand::before, .od-brand::after { content: ""; }
.od-core-label { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); }

/* saída ao vivo */
.od-out { border-color: color-mix(in oklab, var(--brand-2) 40%, var(--line)); background: var(--surface); }
.od-live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-2); }
.od-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 0 rgba(0, 168, 90, 0.5); animation: odBlink 1.4s ease-out infinite; }
@keyframes odBlink { 0% { box-shadow: 0 0 0 0 rgba(0, 168, 90, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 168, 90, 0); } }
.od-out strong { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }

@media (prefers-reduced-motion: reduce) and (update: none) {
  .od-rot span { animation: none; }
  .od-rot span:nth-child(1) { opacity: 1; }
  .od-rot span:nth-child(n+2) { display: none; }
  .od-rot { height: auto; }
  .od-pipe i, .od-ring, .od-dot { animation: none; }
  .od-ring { opacity: 0.4; }
}

.fork-divider { position: relative; display: flex; align-items: center; justify-content: center; }
.fork-divider::before { content: ""; position: absolute; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--line-strong), transparent); }
.fork-or {
  position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--ink-muted);
}
@media (max-width: 900px) {
  .fork-divider { padding: 4px 0; }
  .fork-divider::before { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
}

/* ------------------------- Medidor de progresso ------------------------- */
.progress-nav { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.progress-nav a { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pn-label { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); opacity: 0; transform: translateX(6px); transition: opacity 0.3s, color 0.3s, transform 0.3s; }
.pn-tick { width: 22px; height: 2px; border-radius: 2px; background: var(--line-strong); transition: width 0.3s var(--ease), background 0.3s; }
.progress-nav a:hover .pn-label { opacity: 1; }
.progress-nav a.active .pn-tick { width: 42px; background: var(--brand); animation: pnPulse 1.6s ease-in-out infinite; }
.progress-nav a.active .pn-label { opacity: 1; color: var(--brand-strong); }
@keyframes pnPulse { 0%, 100% { box-shadow: 0 0 8px rgba(132, 232, 14, 0.4); width: 42px; } 50% { box-shadow: 0 0 18px rgba(132, 232, 14, 0.85); width: 52px; } }
@media (prefers-reduced-motion: reduce) and (update: none) { .progress-nav a.active .pn-tick { animation: none; box-shadow: 0 0 12px rgba(132, 232, 14, 0.5); } }
@media (max-width: 1100px) { .progress-nav { display: none; } }

/* ============================ PRODUCT SECTIONS =========================== */
.product {
  --pad-section: clamp(80px, 11vw, 150px);
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(64% 56% at 86% 4%, color-mix(in oklab, var(--theme-accent) 16%, transparent), transparent 62%),
    radial-gradient(54% 48% at 6% 96%, color-mix(in oklab, var(--theme-accent) 12%, transparent), transparent 64%),
    var(--bg);
}
.product .product-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
@media (max-width: 940px) { .product .product-grid { grid-template-columns: 1fr; } }

.product-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 8px 16px 8px 8px; border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--theme-accent) 35%, var(--line));
  background: color-mix(in oklab, var(--theme) 10%, transparent);
}
.product-badge .mk {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--theme); color: var(--theme-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
}
.product-badge span { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); }

.product h2 { font-family: var(--theme-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 18px; }
.product h2 .accent { color: var(--theme-accent); }
.product .product-tagline { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--ink); font-weight: 500; margin-bottom: 18px; font-family: var(--theme-display); }
.product .lede { margin-bottom: 26px; }

.feature-list { display: grid; gap: 14px; margin-bottom: 32px; }
.feature-list li { position: relative; padding-left: 36px; list-style: none; color: var(--ink-soft); font-size: 0.99rem; line-height: 1.5; }
.feature-list li strong { color: var(--ink); }
.feature-list .chk {
  position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in oklab, var(--theme-accent) 16%, transparent); color: var(--theme-accent);
  display: grid; place-items: center;
}
.feature-list .chk svg { width: 13px; height: 13px; }
.product-cta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* Painel-vitrine (sempre escuro) */
.product-visual {
  position: relative; border-radius: var(--radius-lg); padding: 34px;
  background:
    linear-gradient(165deg, color-mix(in oklab, var(--theme) 22%, var(--theme-surface)), var(--theme-surface));
  border: 1px solid color-mix(in oklab, var(--theme) 26%, transparent);
  min-height: 360px; display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; box-shadow: 0 30px 60px -34px rgba(11, 20, 11, 0.55);
}
.product-visual::before {
  content: ""; position: absolute; right: -30%; top: -30%; width: 70%; height: 70%;
  background: radial-gradient(circle, var(--theme), transparent 70%); opacity: 0.35; filter: blur(40px);
}
.pv-watermark {
  position: absolute; right: -2%; bottom: -8%; font-family: var(--theme-display);
  font-size: 9rem; font-weight: 800; color: var(--theme); opacity: 0.10; line-height: 1; pointer-events: none;
}
.pv-top { display: flex; align-items: center; gap: 12px; position: relative; }
.pv-logo {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--theme); color: var(--theme-ink); font-family: var(--theme-display); font-weight: 700; font-size: 1.25rem;
}
.pv-logo-txt { font-family: var(--theme-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.pv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.pv-metric { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 16px 18px; }
.pv-metric .v { font-family: var(--theme-display); font-size: 1.7rem; font-weight: 700; color: var(--theme); line-height: 1; }
.pv-metric .k { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.pv-chip { font-size: 0.78rem; padding: 6px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }

/* ====================== KAIVAA — réplica do design ======================= */
.product--kaivaa { background: #f3f3f1; }
.product--kaivaa h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: #1b1a18; }
.product--kaivaa h2 .accent { color: #1b1a18; background: #ffe24d; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.14em; border-radius: 6px; }
.product--kaivaa .product-tagline { color: #1b1a18; }
.product--kaivaa .product-badge { background: #ffe24d; border-color: #efcf38; }
.product--kaivaa .product-badge .mk { background: #1b1a18; color: #ffe24d; }
.product--kaivaa .product-badge span { color: #1b1a18; }
.product--kaivaa .feature-list .chk { background: #ffe24d; color: #1b1a18; }
.product--kaivaa .btn-primary { background: #1b1a18; border-color: #1b1a18; color: #fff; border-radius: 100px; }
.product--kaivaa .btn-primary:hover { background: #000; }
.product--kaivaa .btn-ghost { border-radius: 100px; border-color: #1b1a18; color: #1b1a18; }

.kv-mock { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.kv-blob { position: absolute; border-radius: 50%; filter: blur(1px); z-index: 1; animation: kvFloat 7s ease-in-out infinite; }
.kv-blob--purple { width: clamp(80px, 12vw, 130px); aspect-ratio: 1; background: #c9b6ff; top: 2%; right: 0; }
.kv-blob--coral { width: clamp(64px, 9vw, 96px); aspect-ratio: 1; background: #ff9b8e; bottom: 20%; right: -2%; animation-delay: 1.6s; }
.kv-blob--green { width: clamp(74px, 11vw, 116px); aspect-ratio: 1; background: #8fe6a0; bottom: 0; left: 4%; animation-delay: 3.1s; }
.kv-blob--yellow { width: clamp(56px, 8vw, 90px); aspect-ratio: 1; background: #ffe24d; top: 30%; left: -4%; animation-delay: 0.8s; }
.kv-blob--purple2 { width: clamp(44px, 6vw, 70px); aspect-ratio: 1; background: #b9a3f5; bottom: 8%; right: 22%; animation-delay: 2.4s; }
.kv-blob--green2 { width: clamp(40px, 5.5vw, 64px); aspect-ratio: 1; background: #7fe093; top: 6%; left: 24%; animation-delay: 4s; }
.kv-blob--coral2 { width: clamp(40px, 5.5vw, 62px); aspect-ratio: 1; background: #ffb3a6; top: -3%; right: 30%; animation-delay: 5.2s; }
@keyframes kvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.kv-chat { position: relative; z-index: 2; width: min(100%, 430px); background: #fff; border-radius: 24px; border: 1px solid #ececec; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.34); overflow: hidden; }
.kv-chat-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #f0f0ee; }
.kv-ava { width: 42px; height: 42px; border-radius: 50%; background: #ffe24d; display: grid; place-items: center; font-size: 1.2rem; }
.kv-meta { display: flex; flex-direction: column; gap: 2px; }
.kv-meta b { font-family: "Bricolage Grotesque", sans-serif; font-size: 0.96rem; color: #1b1a18; }
.kv-meta span { font-size: 0.73rem; color: #8a8a86; display: flex; align-items: center; gap: 5px; }
.kv-on { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; display: inline-block; }
.kv-live { margin-left: auto; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #e0566a; background: #ffe1e6; padding: 5px 9px; border-radius: 100px; }
.kv-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; height: 252px; overflow: hidden; justify-content: flex-end; }
.kv-bubble { background: #f3f3f1; color: #2a2a28; border-radius: 16px; border-top-left-radius: 5px; padding: 12px 15px; font-size: 0.91rem; line-height: 1.45; max-width: 88%; }
.kv-bubble--user { align-self: flex-end; background: #1b1a18; color: #fff; border-radius: 16px; border-top-right-radius: 5px; }
.kv-typing { display: inline-flex; gap: 5px; align-items: center; background: #f3f3f1; padding: 13px 15px; border-radius: 16px; border-top-left-radius: 5px; width: max-content; }
.kv-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b5b5b0; animation: kvDot 1.3s infinite ease-in-out; }
.kv-typing span:nth-child(2) { animation-delay: 0.18s; }
.kv-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes kvDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.kv-input { display: flex; align-items: center; gap: 10px; border-top: 1px solid #f0f0ee; padding: 13px 16px; }
.kv-input span { flex: 1; color: #a8a8a2; font-size: 0.9rem; }
.kv-send { width: 34px; height: 34px; border-radius: 50%; background: #ededea; color: #8a8a86; display: grid; place-items: center; font-style: normal; font-size: 0.85rem; }

/* ==================== HELLOGROWTH — réplica do design ==================== */
.product--hg h2 .accent { color: #16a34a; }
.product--hg .product-badge .mk { background: #16a34a; color: #fff; }
.product--hg .btn-primary { background: #16a34a; border-color: #16a34a; color: #fff; }
.product--hg .btn-primary:hover { background: #15863f; }
.hg-mock { display: flex; align-items: stretch; }
.hg-panel {
  position: relative; width: 100%; border-radius: 24px; overflow: hidden; color: #fff;
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(150deg, #0fae93 0%, #13b86f 58%, #1ac075 100%);
  box-shadow: 0 30px 70px -34px rgba(15, 120, 90, 0.6);
}
.hg-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask: radial-gradient(125% 95% at 72% 8%, #000, transparent 76%); mask: radial-gradient(125% 95% at 72% 8%, #000, transparent 76%);
}
.hg-eyebrow { position: relative; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #d8fff0; }
.hg-title { position: relative; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; margin: 10px 0 18px; color: #fff; }
.hg-dash { position: relative; background: #fff; border-radius: 16px; padding: 16px; color: #1a2a20; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45); }
.hg-dash-tag { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #16a34a; text-align: center; margin-bottom: 12px; }
.hg-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hg-kpi { background: #f4f8f4; border: 1px solid #e8efe8; border-radius: 10px; padding: 10px 12px; }
.hg-kpi-k { display: block; font-size: 0.64rem; color: #6b7a70; margin-bottom: 3px; }
.hg-kpi-v { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.2rem; }
.hg-up { color: #16a34a; }
.hg-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 7px; height: 52px; margin-top: 4px; }
.hg-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, #2bd46e, #16a34a); border-radius: 4px 4px 0 0; opacity: 0.9; transform-origin: bottom; transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.hg-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.hg-stat { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 14px; padding: 14px 16px; }
.hg-stat-ic { font-size: 0.95rem; opacity: 0.9; margin-bottom: 4px; }
.hg-stat b { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.hg-stat span { font-size: 0.73rem; color: #e6fff4; }
.hg-foot { position: relative; text-align: center; margin-top: 16px; font-size: 0.8rem; color: #e6fff4; }

@media (prefers-reduced-motion: reduce) and (update: none) {
  .kv-blob, .kv-typing span, .hg-bars i { animation: none; }
}

/* =============== CRM / Marketing / Admin — mockups próprios ============== */
.vz-pill { margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme); background: color-mix(in oklab, var(--theme) 16%, transparent); border: 1px solid color-mix(in oklab, var(--theme) 34%, transparent); padding: 5px 10px; border-radius: 100px; }

/* CRM — quadro Kanban */
.crm-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crm-col { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 158px; }
.crm-col-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 6px; }
.crm-col-h i { font-style: normal; background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 0.64rem; }
.crm-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px 10px; font-size: 0.76rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.crm-tag { font-size: 0.64rem; color: var(--theme); font-weight: 700; white-space: nowrap; }
.crm-card--hot { border-color: color-mix(in oklab, var(--theme) 52%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme) 22%, transparent); animation: crmHot 2.4s ease-in-out infinite; }
@keyframes crmHot { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme) 20%, transparent); } 50% { box-shadow: 0 0 18px -2px color-mix(in oklab, var(--theme) 55%, transparent); } }
.crm-card--won { color: var(--theme); border-color: color-mix(in oklab, var(--theme) 40%, transparent); font-weight: 600; }
.crm-insight { position: relative; margin-top: 2px; display: flex; gap: 9px; align-items: center; font-size: 0.79rem; color: rgba(255, 255, 255, 0.86); background: color-mix(in oklab, var(--theme) 9%, transparent); border: 1px solid color-mix(in oklab, var(--theme) 22%, transparent); border-radius: 10px; padding: 10px 12px; }
.crm-ia { flex: 0 0 auto; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; color: var(--theme-ink); background: var(--theme); padding: 3px 7px; border-radius: 6px; }
.crm-board { min-height: 168px; }
.crm-mover {
  position: absolute; top: 0; left: 0; z-index: 3; box-sizing: border-box; opacity: 0;
  background: rgba(255, 255, 255, 0.1); border: 1px solid color-mix(in oklab, var(--theme) 55%, transparent); border-radius: 8px;
  padding: 8px 10px; font-size: 0.76rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  box-shadow: 0 0 20px -2px color-mix(in oklab, var(--theme) 60%, transparent);
  transition: transform 0.85s cubic-bezier(0.6, 0.05, 0.2, 1); will-change: transform;
}
.crm-mover.won { color: var(--theme); border-color: var(--theme); }
.crm-ins-t { transition: opacity 0.3s; }

/* Marketing — gerador de conteúdo */
.mkt-flow { position: relative; display: flex; flex-direction: column; gap: 11px; }
.mkt-input { background: rgba(0, 0, 0, 0.3); border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 10px; padding: 12px 14px; color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; display: flex; align-items: center; gap: 9px; }
.mkt-mic { font-size: 0.95rem; }
.mkt-caret { width: 2px; height: 1em; background: var(--theme); display: inline-block; animation: mktBlink 1s steps(1) infinite; }
@keyframes mktBlink { 50% { opacity: 0; } }
.mkt-arrow { align-self: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme); animation: mktArrow 1.8s ease-in-out infinite; }
@keyframes mktArrow { 0%, 100% { opacity: 0.5; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(2px); } }
.mkt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkt-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 11px 10px; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }
.mkt-card.show { opacity: 1; transform: none; }
.mkt-card b { display: block; font-family: var(--theme-display); font-size: 0.85rem; margin-bottom: 3px; }
.mkt-card span { font-size: 0.64rem; color: rgba(255, 255, 255, 0.6); }

/* Admin — cockpit com anéis */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.adm-rings { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 22px; }
.adm-ring { --p: 0; position: relative; aspect-ratio: 1; width: 100%; max-width: 92px; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--theme) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); animation: ringFill 1.6s ease forwards; }
@keyframes ringFill { from { --p: 0; } }
.adm-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--theme-surface); }
.adm-ring span { position: relative; font-family: var(--theme-display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.adm-ring small { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); font-size: 0.64rem; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.adm-spark { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.adm-spark i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--theme), transparent); border-radius: 3px 3px 0 0; opacity: 0.65; animation: hgBar 2.6s ease-in-out infinite; transform-origin: bottom; }
.adm-spark i:nth-child(even) { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) and (update: none) {
  .crm-card--hot, .mkt-caret, .mkt-arrow, .adm-spark i { animation: none; }
  .adm-ring { animation: none; }
}

/* ====== Mundos próprios de cada produto interno (paletas distintas) ====== */
/* CRM — sala de comando comercial (escuro, teal/ciano) */
#crm {
  --ink: #eaf4f2; --ink-soft: #c2d4d0; --ink-muted: #93a8a3; --line: rgba(255, 255, 255, 0.12);
  --theme: #2fe0bd; --theme-accent: #2fe0bd; --theme-2: #2fe0bd; --theme-ink: #06231d; --theme-surface: #0a1c1a;
  --theme-display: "Chakra Petch", "Space Grotesk", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(70% 60% at 82% 0%, rgba(47, 224, 189, 0.14), transparent 60%),
    radial-gradient(60% 60% at 10% 100%, rgba(47, 224, 189, 0.08), transparent 64%),
    linear-gradient(160deg, #0a1620, #0c2020);
}
#crm .btn-primary { background: var(--theme); border-color: var(--theme); color: #06231d; }
#crm .btn-primary:hover { background: #5cead0; }

/* Marketing — estúdio criativo (claro, coral/violeta) */
#marketing {
  --theme: #ff5a8a; --theme-accent: #e23d72; --theme-2: #a05bff; --theme-ink: #2a0a16;
  --theme-display: "Syne", "Sora", sans-serif;
  background:
    radial-gradient(66% 60% at 14% 0%, rgba(255, 120, 90, 0.14), transparent 60%),
    radial-gradient(60% 60% at 92% 100%, rgba(160, 91, 255, 0.12), transparent 62%),
    #fff7f3;
}
#marketing .btn-primary { background: var(--theme); border-color: var(--theme); color: #fff; }
#marketing .btn-primary:hover { background: #ff7aa2; }

/* Admin — cockpit (escuro, âmbar/teal) */
#admin {
  --ink: #eef3f1; --ink-soft: #c4d2ce; --ink-muted: #93a5a0; --line: rgba(255, 255, 255, 0.12);
  --theme: #ffc24b; --theme-accent: #ffc24b; --theme-2: #ffc24b; --theme-ink: #2a1d04; --theme-surface: #11201b;
  --theme-display: "Orbitron", "Space Grotesk", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(72% 60% at 50% 0%, rgba(255, 194, 75, 0.12), transparent 60%),
    radial-gradient(60% 60% at 88% 100%, rgba(47, 224, 189, 0.08), transparent 64%),
    linear-gradient(160deg, #0c1714, #102019);
}
#admin .btn-primary { background: var(--theme); border-color: var(--theme); color: #2a1d04; }
#admin .btn-primary:hover { background: #ffd47a; }

/* Animações de fundo na paleta de cada mundo (atrás do conteúdo) */
#marketing > .wrap, #crm > .wrap, #kaivaa > .wrap { position: relative; z-index: 1; }
#marketing::before, #marketing::after, #crm::before, #crm::after, #kaivaa::before, #kaivaa::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(60px);
}
#marketing::before { width: 44vw; height: 44vw; background: rgba(255, 90, 138, 0.20); top: -12%; left: -8%; animation: bgFloatA 19s ease-in-out infinite alternate; }
#marketing::after { width: 38vw; height: 38vw; background: rgba(160, 91, 255, 0.18); bottom: -14%; right: -6%; animation: bgFloatB 24s ease-in-out infinite alternate; }
#crm::before { width: 42vw; height: 42vw; background: rgba(47, 224, 189, 0.16); top: -12%; right: -8%; animation: bgFloatB 21s ease-in-out infinite alternate; }
#crm::after { width: 34vw; height: 34vw; background: rgba(47, 224, 189, 0.11); bottom: -10%; left: -6%; animation: bgFloatA 26s ease-in-out infinite alternate; }
#kaivaa::before { width: 42vw; height: 42vw; background: rgba(255, 213, 74, 0.22); top: -14%; left: -6%; animation: bgFloatA 20s ease-in-out infinite alternate; }
#kaivaa::after { width: 36vw; height: 36vw; background: rgba(201, 182, 255, 0.22); bottom: -12%; left: 24%; animation: bgFloatB 25s ease-in-out infinite alternate; }
@keyframes bgFloatA { from { transform: translate(0, 0); } to { transform: translate(22%, 16%); } }
@keyframes bgFloatB { from { transform: translate(0, 0); } to { transform: translate(-20%, -14%); } }
@media (prefers-reduced-motion: reduce) and (update: none) { #marketing::before, #marketing::after, #crm::before, #crm::after { animation: none; } }

/* ====== Transição entre plataformas: slides que sobem e cobrem ======
   Admin fica de fora: dele para a página final é scroll normal. */
.platforms-stack { position: relative; z-index: 0; }
.final, .footer { position: relative; z-index: 1; }
#solucoes { scroll-margin-top: 0; }
@media (min-width: 941px) {
  #hellogrowth, #kaivaa, #crm, #marketing {
    position: sticky; top: 0; min-height: 100svh;
    display: flex; align-items: center;
    box-shadow: 0 -24px 60px -30px rgba(11, 20, 11, 0.28);
  }
  /* Admin: mesma altura dos demais (sem sticky) p/ a final não vazar junto */
  #admin { min-height: 100svh; display: flex; align-items: center; }
  /* compacta o conteúdo p/ caber inteiro em 100vh (nada cortado) */
  .product { --pad-section: clamp(32px, 5vh, 64px); }
  .product .product-grid { align-items: center; }
  .product h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 12px; }
  .product .product-tagline { font-size: clamp(1rem, 1.3vw, 1.18rem); margin-bottom: 10px; }
  .product .lede { font-size: clamp(0.95rem, 1.05vw, 1.06rem); margin-bottom: 16px; }
  .product .product-badge { margin-bottom: 14px; }
  .feature-list { gap: 9px; margin-bottom: 0; }
  .feature-list li { font-size: 0.9rem; line-height: 1.38; padding-left: 32px; }
  .feature-list .chk { width: 20px; height: 20px; }
  /* visuais um pouco menores p/ caberem na mesma tela */
  .hg-title { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 8px 0 14px; }
  .hg-dash { padding: 14px; }
  .hg-bars { height: 44px; }
  .hg-stat b { font-size: 1.4rem; }
  .hg-stat { padding: 12px 14px; }
  .kv-body { height: 224px; }
  .crm-board { min-height: 156px; }
}

/* "Pronto pra usar" centralizado também */
.fork-col--ready { text-align: center; align-items: center; }
.fork-col--ready .fork-head, .fork-col--ready .fork-list { width: 100%; }
.fork-col--ready .fork-badge { align-self: center; }
.fork-col--ready .fork-head p { margin-inline: auto; max-width: 38ch; }
.fork-col--ready .fork-item { text-align: left; }

/* -------------------- Ajustes de mobile (plataformas) ------------------- */
@media (max-width: 940px) {
  .product .product-grid { text-align: center; }
  .product-badge { align-self: center; }
  .product h2, .product .product-tagline, .product .lede { margin-inline: auto; }
  .feature-list { max-width: 440px; margin-inline: auto; text-align: left; }
  .product-visual, .hg-mock, .kv-mock { margin-inline: auto; max-width: 460px; width: 100%; }
  .kv-mock { overflow: visible; }
  .fork { grid-template-columns: 1fr; }
  .fork::before, .fork::after { display: none; }
}
@media (max-width: 560px) {
  .kv-blob--purple { width: 80px; right: 2%; top: -2%; }
  .kv-blob--coral { width: 64px; right: 0; }
  .kv-blob--green { width: 72px; left: 0; }
}

/* ----------------------------- Testimonials ------------------------------ */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 40px -34px rgba(11, 20, 11, 0.5);
}
.quote p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 20px; }
.quote .who { display: flex; align-items: center; gap: 13px; }
.quote .av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; }
.quote .who b { font-family: var(--font-display); font-size: 0.95rem; display: block; color: var(--ink); }
.quote .who span { font-size: 0.82rem; color: var(--ink-muted); }
.stars { color: #e8a900; letter-spacing: 2px; margin-bottom: 14px; font-size: 0.95rem; }

/* ------------------------------- Final CTA ------------------------------- */
/* Fechamento: CTA + rodapé como um bloco contínuo (sem divisa) */
.closing {
  position: relative; z-index: 1;
  background: linear-gradient(180deg,
    var(--bg-2) 0%,
    #eaf6db 34%,
    #7cc25a 54%,
    #1d8038 68%,
    #0b5f2b 82%,
    #093a18 100%);
}
.final {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center;
  background: transparent;
  border-top: none;
}
.rocket-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.final > .wrap { position: relative; z-index: 1; }
.final h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 22px; }
.final .lede { margin: 0 auto 36px; }
.final-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------- Footer --------------------------------- */
.footer { border-top: 1px solid var(--line); padding-block: 56px 40px; background: var(--bg); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-items: flex-start; }
.footer .brand { margin-bottom: 16px; }
.footer p { color: var(--ink-muted); font-size: 0.92rem; max-width: 38ch; }
.footer-col h5 { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--ink-soft); font-size: 0.94rem; padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--brand-strong); }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--ink-muted); font-size: 0.85rem; }

/* Nav minimalista */
.nav-tag { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); }
@media (max-width: 560px) { .nav-tag { display: none; } }

/* Footer verde + tech (fechamento da apresentação) */
.footer--green { position: relative; isolation: isolate; overflow: hidden; border-top: none; padding-block: clamp(40px, 6vw, 80px) clamp(60px, 9vw, 110px); background: transparent; color: #eafce0; }
.footer-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.footer-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.footer-tech { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9be86a; }
.footer--green .brand, .footer--green .brand span { color: #fff; }
.footer--green .brand .kanji { color: #bff58a; }
.footer--green .brand--lg .logo-dot { background: #fff; color: #0a5f2a; box-shadow: 0 0 26px rgba(190, 245, 138, 0.45); }
.brand--lg { font-size: 1.8rem; gap: 13px; }
.brand--lg .logo-dot { width: 44px; height: 44px; font-size: 1.18rem; }
.footer--green .footer-tagline { color: #ffffff; max-width: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.1vw, 1.55rem); }

/* ---------------------------- Reveal on scroll --------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) and (update: none) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------- Mobile menu -------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: color-mix(in oklab, var(--bg) 97%, transparent);
  backdrop-filter: blur(8px); display: none; flex-direction: column; gap: 8px;
  padding: 90px 28px 40px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-display); font-size: 1.4rem; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu .close { position: absolute; top: 22px; right: 22px; background: none; border: 0; color: var(--ink); }
@media (max-width: 900px) { .nav-toggle { display: grid; place-items: center; background: none; border: 0; color: var(--ink); } }