/* enxame.ia — site institucional
   Direção: "um motivo só" — o hexágono da colmeia (marca) é botão, palco, diagrama e faixa.
   Regras da casa (taste-skill): sem eyebrow, sem mono fora da interface, sem linhas finas,
   sem gradiente, sem sombra em repouso, títulos em até duas linhas. */

:root {
  color-scheme: dark;

  /* Paleta da marca (mantida do design system) */
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-2: #262626;
  --ink: #f2f1ee;
  --muted: #a8a8a8;
  --accent: #f1b44a;
  --accent-deep: #d99a2b;      /* o mesmo mel, um passo abaixo, só para formas grandes */
  --accent-ink: #121212;
  --wax: #ebeae6;              /* campo claro */
  --wax-ink: #161616;
  --wax-muted: #57534b;
  --hive: #2e1e07;             /* campo escuro quente */
  --hive-ink: #fae7bf;

  /* Tipo: cinco degraus */
  --f-display: "Stack Sans Headline", "Stack Sans Text", system-ui, sans-serif;
  --f-text: "Stack Sans Text", system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 6vw, 6.5rem);

  /* Espaço */
  --m: clamp(16px, 2vw, 28px);          /* a única margem externa */
  --gap: 20px;
  --section: clamp(88px, 10vw, 160px);  /* distância entre seções */

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  /* O motivo: hexágono de ponta para cima (o mesmo das células da marca) */
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--step-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-body); font-weight: 500; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botão: o hexágono esticado ---------- */
.btn {
  --c: var(--accent); --t: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 40px;
  background: var(--c); color: var(--t);
  font: 500 var(--step-body)/1 var(--f-text);
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn:hover { --c: #f6c86f; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 0; --c: var(--ink); }
.btn.dark { --c: var(--bg); --t: var(--accent); }
.btn.dark:hover { --c: #2a2a2a; }

.link {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.link:hover { text-decoration-color: currentColor; }


/* ---------- Barra do topo ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-block: 18px; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 36px; height: auto; }
.brand span { font: 500 var(--step-lead)/1 var(--f-text); letter-spacing: -0.02em; }
.brand b { font-weight: 500; color: var(--accent); }
.top-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.top-links a, .top-in { text-decoration: none; color: var(--ink); padding: 12px 2px; font-size: var(--step-small); transition: color var(--t-hover) ease; }
.top-links a:hover, .top-in:hover { color: var(--accent); }
.top-act { display: flex; align-items: center; gap: 20px; }
.btn.small { min-height: 46px; padding: 0 28px; font-size: var(--step-small); }

/* ---------- HERO: a colmeia que enche com o trabalho feito ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 82px); display: flex; align-items: center; padding-block: 32px 80px; }
.hive { position: absolute; top: -30px; bottom: -30px; left: 40%; right: -4%; pointer-events: none; }
.hive svg { width: 100%; height: 100%; display: block; }
.hive use { fill: #1b1b1b; transition: fill 1200ms ease; }
.hive use.half { fill: #3a2a0e; }
.hive use.on { fill: var(--accent); }
.hero-grid { position: relative; align-items: center; row-gap: 56px; }
.hero-text { grid-column: 1 / span 7; }
.hero h1 { font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.92; }
.hero-lead { font-size: var(--step-lead); line-height: 1.4; max-width: 32ch; margin-top: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 44px; }
.hero-cta .link { font-weight: 500; padding: 12px 0; text-decoration-color: var(--accent); }
.hero-feed { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 470px; }

[data-ui].feed { background: #121212; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
[data-ui] .feed-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
[data-ui] .feed-top b { font-weight: 500; font-size: 15px; }
[data-ui] .feed-top span { font-size: 12px; color: #8a8a8a; }
[data-ui] .feed-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
[data-ui] .feed-stats strong { display: block; font: 500 28px/1 var(--f-display); letter-spacing: -0.02em; color: #f1b44a; font-variant-numeric: tabular-nums; }
[data-ui] .feed-stats span { display: block; font-size: 12px; color: #a8a8a8; margin-top: 6px; line-height: 1.3; }
[data-ui] .feed-list { height: 312px; overflow: hidden; }
[data-ui] .feed-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
[data-ui] .feed-list i { width: 20px; height: 23px; clip-path: var(--hex); background: rgba(241,180,74,.3); margin-top: 1px; transition: background-color 600ms ease; }
[data-ui] .feed-list li.new i { background: #f1b44a; }
[data-ui] .feed-list p { font-size: 14px; line-height: 1.35; }
[data-ui] .feed-list .h { color: #f1b44a; font-weight: 500; }
[data-ui] .feed-list small { display: block; font-size: 12px; color: #8a8a8a; margin-top: 3px; }
[data-ui] .feed-list li.new { animation: feed-in 700ms var(--ease-out) both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------- A rotina ---------- */
.pain { background: var(--wax); color: var(--wax-ink); padding-block: var(--section); }
.pain-head { grid-column: 1 / span 7; }
.pain-head p { margin-top: 28px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.4; }
.pain-pic { grid-column: 9 / -1; grid-row: 1; display: flex; gap: 20px; align-items: flex-end; }
.pain-pic .hexpic { width: min(240px, 52%); flex: none; }
.pain-pic figcaption { font-size: var(--step-small); color: var(--wax-muted); max-width: 22ch; padding-bottom: 10%; }
.pain-list { grid-column: 1 / -1; margin-top: 80px; display: flex; flex-direction: column; }
.pain-list li { display: grid; grid-template-columns: 5fr 7fr; gap: 16px var(--gap); padding: 30px 28px; align-items: baseline; }
.pain-list li:nth-child(odd) { background: #dfded8; }
.pain-list .chore { font: 300 var(--step-lead)/1.25 var(--f-display); letter-spacing: -0.015em; }
.pain-list .fix { max-width: 54ch; }
.pain-list .h { color: #7a4f0e; font-weight: 500; }

/* ---------- A conta ---------- */
.calc { background: var(--accent); color: var(--accent-ink); padding-block: var(--section); }
.calc .grid { align-items: center; row-gap: 56px; }
.calc-head { grid-column: 1 / span 5; }
.calc-head p { margin-top: 24px; max-width: 36ch; }
.calc-form { margin-top: 48px; display: flex; flex-direction: column; }
.calc-form label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; margin-top: 28px; }
.calc-form output { font: 500 var(--step-lead)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.calc-form input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 4px 0 0; }
.calc-form input[type=range]::-webkit-slider-runnable-track { height: 6px; background: #121212; }
.calc-form input[type=range]::-moz-range-track { height: 6px; background: #121212; }
.calc-form input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 34px; margin-top: -14px; background: #121212; clip-path: var(--hex); border: 0; }
.calc-form input[type=range]::-moz-range-thumb { width: 30px; height: 34px; background: #121212; border: 0; border-radius: 0; clip-path: var(--hex); }
.calc-form input[type=range]:focus-visible { outline: 3px solid #121212; outline-offset: 2px; }
.calc-out { grid-column: 7 / -1; }
.calc-num { font-family: var(--f-display); font-weight: 300; line-height: 0.85; letter-spacing: -0.045em; font-size: clamp(7rem, 15vw, 13.5rem); font-variant-numeric: tabular-nums; }
.calc-num small { display: block; font: 500 var(--step-lead)/1.2 var(--f-text); letter-spacing: 0; margin-top: 20px; }
.calc-say { margin-top: 32px; font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; }
.calc-say b { font-weight: 500; }
.calc-note { margin-top: 28px; font-size: var(--step-small); max-width: 52ch; color: #3d2a0a; }

/* ---------- Interface do chat (fragmento real do produto) ---------- */
[data-ui] { font-family: var(--f-text); color: #f2f1ee; }
[data-ui] .mono { font-weight: 500; }
[data-ui].chat {
  width: min(540px, 100%); background: #121212; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08); overflow: hidden;
  box-shadow: 0 24px 60px rgba(46,30,7,.45);
}
[data-ui] .chat-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px;
}
[data-ui] .chat-top b { font-weight: 500; }
[data-ui] .chat-top .mono { color: #a8a8a8; }
[data-ui] .chat-log {
  padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 452px;
  transition: opacity 600ms ease;
}
[data-ui] .chat-log.fade { opacity: 0; }
[data-ui] .msg { max-width: 88%; font-size: 15px; line-height: 1.45; }
[data-ui] .msg.me {
  align-self: flex-end; background: #262626; padding: 11px 14px;
  border-radius: 14px 14px 4px 14px;
}
[data-ui] .msg.bot { color: #d9d9d9; }
[data-ui] .plan {
  border: 1px solid #f1b44a; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px; background: #171717;
}
[data-ui] .plan-head { display: flex; gap: 14px; align-items: center; }
[data-ui] .plan-head b { display: block; font-size: 17px; font-weight: 500; }
[data-ui] .plan-head small { color: #a8a8a8; font-size: 13px; }
/* Mini colmeia: uma célula por agente */
[data-ui] .cells { position: relative; width: 46px; height: 46px; flex: none; }
[data-ui] .cells i {
  position: absolute; width: 14px; height: 16px; clip-path: var(--hex);
  background: #333; transition: background-color 400ms ease, transform 400ms var(--ease-out);
}
[data-ui] .cells i.on { background: rgba(241,180,74,.55); }
[data-ui] .cells i.core { background: #f1b44a; }
[data-ui] .agents { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: #a8a8a8; }
[data-ui] .agents li { display: flex; gap: 10px; align-items: baseline; }
[data-ui] .agents .mono { color: #f1b44a; flex: none; min-width: 96px; }
[data-ui] .conns { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; font-size: 14px; }
[data-ui] .conns li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; }
[data-ui] .ok { color: #4ec98a; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
[data-ui] .ok svg { width: 14px; height: 14px; }
[data-ui] .conn {
  font: 500 13px/1 var(--f-text); color: #f2f1ee; background: #262626;
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 9px 12px; cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
[data-ui] .conn:hover { background: #333; }
[data-ui] .conn[aria-busy="true"] { color: #a8a8a8; cursor: progress; }
[data-ui] .go {
  font: 500 15px/1 var(--f-text); background: #f1b44a; color: #121212; border: 0;
  border-radius: 8px; padding: 13px; cursor: pointer; transition: background-color var(--t-hover) ease, opacity var(--t-ui) ease;
}
[data-ui] .go:hover:not(:disabled) { background: #f6c86f; }
[data-ui] .go:disabled { opacity: .45; cursor: not-allowed; }
[data-ui] .status { font-size: 14px; color: #4ec98a; }
[data-ui] .chat-chips {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px;
}
[data-ui] .chip {
  font: 400 13px/1.2 var(--f-text); color: #d9d9d9; background: #1c1c1c;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 9px 12px; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}
[data-ui] .chip:hover { background: #262626; color: #fff; }
[data-ui] .chip[aria-pressed="true"] { border-color: #f1b44a; color: #f1b44a; }
[data-ui] .chat-input {
  display: flex; justify-content: space-between; align-items: center; margin: 0 18px 18px;
  padding: 12px 14px; background: #1c1c1c; border-radius: 10px; color: #8a8a8a; font-size: 14px;
}
[data-ui] .chat-input i { width: 30px; height: 34px; clip-path: var(--hex); background: #f1b44a; display: block; flex: none; }
/* Entrada das mensagens */
[data-ui] .enter { animation: ui-in 520ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes ui-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-ui] .typing { display: inline-flex; gap: 4px; padding: 10px 0; }
[data-ui] .typing i { width: 6px; height: 7px; clip-path: var(--hex); background: #a8a8a8; animation: ui-type 900ms ease-in-out infinite; }
[data-ui] .typing i:nth-child(2) { animation-delay: 150ms; }
[data-ui] .typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes ui-type { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- Como funciona: o chat ---------- */
.how { padding-block: var(--section); }
.how .grid { align-items: center; row-gap: 56px; }
.how-text { grid-column: 1 / span 5; }
.how-text > p { margin-top: 24px; max-width: 40ch; }
.how-steps { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.how-steps li { max-width: 44ch; }
.how-steps b { display: block; font-weight: 500; margin-bottom: 4px; }
.how-try { margin-top: 36px; color: var(--muted); font-size: var(--step-small); }
.stage {
  grid-column: 7 / -1; position: relative; background: var(--accent); overflow: hidden;
  display: grid; place-items: center; padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 48px);
  min-height: min-content;
}
.stage::before {
  content: ""; position: absolute; width: 112%; aspect-ratio: 0.866;
  left: 38%; top: 30%; background: var(--accent-deep); clip-path: var(--hex);
}
.stage > * { position: relative; }

.hexpic { aspect-ratio: 0.866; clip-path: var(--hex); overflow: hidden; background: var(--surface); }
.hexpic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-expo); }
.js .hexpic:not(.in) img, .js [data-r]:not(.in) .hexpic img { transform: scale(1.12); }
.faq-pic { width: min(220px, 70%); margin-top: 48px; }
.credits { margin-top: 40px; font-size: var(--step-small); color: var(--wax-muted); max-width: 60ch; }

/* ---------- Conectores: placa quadrada ---------- */
.connect { background: var(--wax); color: var(--wax-ink); }
.connect .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); min-height: 88svh; padding-block: 40px; }
.plate {
  aspect-ratio: 1; align-self: center; width: 100%; background: var(--bg);
  position: relative; overflow: hidden; display: grid; place-items: center; padding: 8%;
}
.plate::before {
  content: ""; position: absolute; width: 74%; aspect-ratio: 0.866; clip-path: var(--hex);
  background: var(--accent); left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.plate > * { position: relative; }
.connect-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 24px 0 24px clamp(0px, 3vw, 48px); gap: 48px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tabs button {
  font: 400 var(--step-body)/1 var(--f-text); color: var(--wax-muted); background: none; border: 0;
  padding: 12px 0; cursor: pointer; transition: color var(--t-hover) ease;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; text-decoration-color: transparent;
}
.tabs button:hover { color: var(--wax-ink); }
.tabs button[aria-selected="true"] { color: var(--wax-ink); text-decoration-color: var(--accent-deep); font-weight: 500; }
.connect-copy h2 { max-width: 14ch; }
.connect-copy .desc { margin-top: 40px; max-width: 38ch; font-size: var(--step-lead); line-height: 1.4; }
.connect-copy .also { margin-top: 24px; max-width: 46ch; color: var(--wax-muted); }
.cells2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cells2 a {
  min-height: 72px; display: flex; align-items: center; padding: 0 24px; text-decoration: none;
  font-weight: 500; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.cells2 a:active { transform: translateY(1px); }
.cells2 a:first-child { background: var(--wax-ink); color: var(--wax); }
.cells2 a:first-child:hover { background: #333; }
.cells2 a:last-child { background: #dcdbd5; color: var(--wax-ink); }
.cells2 a:last-child:hover { background: #d0cfc8; }

/* Fragmento: janela de conexão */
[data-ui].login {
  width: min(360px, 100%); background: #121212; border-radius: 12px; padding: 22px;
  border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
}
[data-ui].login .lt { display: flex; justify-content: space-between; font-size: 13px; color: #a8a8a8; }
[data-ui].login b { font-size: 19px; font-weight: 500; color: #f2f1ee; }
[data-ui].login p { font-size: 14px; color: #a8a8a8; }
[data-ui].login .prov { display: flex; flex-direction: column; gap: 8px; }
[data-ui].login .prov span {
  display: flex; justify-content: space-between; align-items: center;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 12px 14px; font-size: 15px;
}
[data-ui].login .prov span.sel { border-color: #f1b44a; }
[data-ui].login .prov em { font-style: normal; color: #f1b44a; font-size: 13px; }
[data-ui].login small { font-size: 12px; color: #8a8a8a; }
[data-ui].login.swap { animation: ui-in 480ms var(--ease-out) both; }

/* ---------- O que dá para fazer: espécimes ---------- */
.uses { padding-top: var(--section); }
.uses-head { grid-column: 1 / span 3; align-self: start; }
.uses-head p { margin-top: 24px; max-width: 30ch; }
.tiles { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 10px; }
.tile figure { display: flex; flex-direction: column; gap: 14px; }
/* overflow visível: a proporção vira altura mínima e o cartão cresce com o conteúdo, em vez de cortar o texto */
.tile .face { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 8%; overflow: visible; }
.tile.wide { grid-column: span 2; }
.tile.wide .face { aspect-ratio: 8 / 5; }
.tile.f1 .face { background: var(--accent); }
.tile.f2 .face { background: var(--wax); }
.tile.f3 .face { background: var(--surface-2); }
.tile figcaption b { display: block; font-weight: 500; }
.tile figcaption span { display: block; color: var(--muted); margin-top: 4px; max-width: 34ch; }
.tile [data-ui] { transition: transform 600ms var(--ease-out); }
.tile:hover [data-ui] { transform: translateY(-4px); }

[data-ui].mini {
  width: 100%; max-width: 300px; background: #121212; border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.4;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
[data-ui].mini .top { display: flex; justify-content: space-between; color: #8a8a8a; font-size: 12px; }
[data-ui].mini .b-in { background: #262626; padding: 9px 11px; border-radius: 12px 12px 12px 4px; max-width: 90%; }
[data-ui].mini .b-out { background: #3b2a0c; color: #fae7bf; padding: 9px 11px; border-radius: 12px 12px 4px 12px; max-width: 90%; align-self: flex-end; }
[data-ui].mini .tag { color: #f1b44a; }
[data-ui].mini .row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
[data-ui].mini .row:last-child { border-bottom: 0; }
[data-ui].mini .muted { color: #8a8a8a; }
[data-ui].mini .pill { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(241,180,74,.16); color: #f1b44a; white-space: nowrap; }
[data-ui].mini .act { display: flex; gap: 8px; }
[data-ui].mini .act span { flex: 1; text-align: center; padding: 8px; border-radius: 6px; background: #262626; }
[data-ui].mini .act span.y { background: #f1b44a; color: #121212; font-weight: 500; }
[data-ui].mini.wide { max-width: 440px; }

/* ---------- Faixa da colmeia (divide a página em duas) ---------- */
.band { margin-top: clamp(80px, 8vw, 128px); display: flex; gap: 6px; overflow: hidden; height: 52px; background: var(--bg); }
.band i { flex: none; width: 45px; height: 52px; clip-path: var(--hex); background: var(--accent); transition: transform 900ms var(--ease-expo); transition-delay: var(--dl, 0ms); }
.band i:nth-child(3n+2) { background: var(--accent-deep); }
.band i:nth-child(3n) { background: var(--hive); }
.js .band:not(.in) i { transform: translateY(60%) scale(.6); }

/* ---------- Aprovações ---------- */
.safe { background: var(--hive); color: var(--hive-ink); padding-block: var(--section); }
.safe-head { grid-column: 1 / span 6; }
.safe-list { grid-column: 1 / span 6; margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gap); }
.safe-list b { display: block; font-weight: 500; }
.safe-list p { margin-top: 8px; color: rgba(250,231,191,.84); }
.safe-ui { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; }
[data-ui].queue {
  background: #121212; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
[data-ui].queue .qh { display: flex; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; }
[data-ui].queue .qh span { color: #a8a8a8; font-size: 13px; }
[data-ui].queue li { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06); display: grid; gap: 10px; transition: background-color 300ms ease, opacity 500ms ease; }
[data-ui].queue li:last-child { border-bottom: 0; }
[data-ui].queue li.done { opacity: .55; }
[data-ui].queue .qt { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: #f2f1ee; }
[data-ui].queue .qt .mono { color: #f1b44a; }
[data-ui].queue .qp { font-size: 14px; color: #a8a8a8; background: #1c1c1c; border-radius: 8px; padding: 10px 12px; }
[data-ui].queue .qa { display: flex; gap: 8px; }
[data-ui].queue .qa button {
  font: 500 13px/1 var(--f-text); padding: 10px 14px; border-radius: 6px; cursor: pointer;
  background: #262626; color: #f2f1ee; border: 1px solid rgba(255,255,255,.12); transition: background-color var(--t-hover) ease;
}
[data-ui].queue .qa button:hover { background: #333; }
[data-ui].queue .qa button.y { background: #f1b44a; color: #121212; border-color: #f1b44a; }
[data-ui].queue .qa button.y:hover { background: #f6c86f; }
[data-ui].queue .ok { font-size: 13px; }

/* ---------- Preço ---------- */
.price { padding-block: clamp(96px, 9vw, 150px) var(--section); }
.price .grid { align-items: center; }
.price-head { grid-column: 1 / span 4; }
.price-head p { margin-top: 24px; max-width: 34ch; }
.price-fig { grid-column: 6 / -1; position: relative; }
.figure {
  font-family: var(--f-display); font-weight: 300; line-height: 0.85; letter-spacing: -0.045em;
  font-size: clamp(7rem, 15vw, 13.5rem); display: flex; align-items: flex-start; font-variant-numeric: tabular-nums;
}
.figure .cur { font-size: var(--step-display); margin-top: 0.1em; margin-right: 0.08em; letter-spacing: 0; }
.figure .per { font-size: var(--step-body); letter-spacing: 0; align-self: flex-end; margin: 0 0 0.6em 0.6em; color: var(--muted); }
.fig-wrap { --hw: clamp(110px, 12vw, 180px); position: relative; display: inline-block; padding-right: calc(var(--hw) + 12px); }
.price-fig .over { position: absolute; top: -22%; right: 0; width: var(--hw); }
.per-line { margin-top: 20px; color: var(--muted); }
.incl { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.price-fig .btn { margin-top: 40px; }

/* ---------- Dúvidas ---------- */
.faq { padding-bottom: var(--section); }
.faq-head { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.faq-head h2 { font-size: var(--step-head); }
.faq-list { grid-column: 5 / -1; display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--surface); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.faq summary {
  list-style: none; cursor: pointer; min-height: 76px; padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: var(--step-body); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: #222; }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.plus::after { transform: rotate(90deg); }
.faq details[open] { background: var(--accent); color: var(--accent-ink); }
.faq details[open] summary:hover { background: transparent; }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details p { padding: 0 24px 24px; max-width: 52ch; }

/* ---------- Contato: o cupom ---------- */
.contact { padding-bottom: clamp(80px, 9vw, 140px); }
.coupon {
  grid-column: 2 / span 10; position: relative; background: var(--accent); color: var(--accent-ink);
  display: grid; grid-template-columns: 46fr 54fr; min-height: 420px;
}
.coupon::before, .coupon::after {
  content: ""; position: absolute; left: 46%; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); transform: translateX(-50%);
}
.coupon::before { top: -14px; }
.coupon::after { bottom: -14px; }
.perf { position: absolute; left: 46%; top: 22px; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; }
.perf i { width: 5px; height: 5px; border-radius: 50%; background: var(--bg); }
.coupon-l { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.coupon-l h2 { font-size: var(--step-head); max-width: 9ch; }
.coupon-l p { max-width: 32ch; }
.coupon form { padding: 48px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.coupon input, .coupon textarea {
  width: 100%; min-height: 52px; border: 0; background: #f6cb7e; color: var(--accent-ink);
  font: 400 var(--step-body)/1.4 var(--f-text); padding: 14px 16px; border-radius: 0;
}
.coupon textarea { min-height: 88px; resize: vertical; }
.coupon ::placeholder { color: #4a3510; opacity: 1; }
.coupon input:focus-visible, .coupon textarea:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 0; }
.coupon button {
  min-height: 56px; border: 0; background: var(--bg); color: var(--accent); cursor: pointer;
  font: 500 var(--step-body)/1 var(--f-text); margin-top: 6px; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.coupon button:hover { background: #2a2a2a; }
.coupon button:active { transform: translateY(1px); }
.coupon .note { font-size: var(--step-small); margin-top: 4px; }

/* ---------- Rodapé: a marca, grande ---------- */
.foot { background: var(--wax); color: var(--wax-ink); padding: 72px 0 32px; }
.foot-mark { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 48px); min-height: 34svh; }
.foot-mark img { height: clamp(140px, 30svh, 320px); width: auto; flex: none; }
.foot-mark p {
  font-family: var(--f-display); font-weight: 300; letter-spacing: -0.045em; line-height: 0.8;
  font-size: clamp(4rem, 15vw, 13.5rem); margin-bottom: -0.06em;
}
.foot-mark p b { font-weight: 300; color: #b97f17; }
.foot-links { margin-top: 56px; row-gap: 32px; }
.foot-links nav { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; font-size: var(--step-small); }
.foot-links nav strong { font-weight: 500; margin-bottom: 4px; }
.foot-links nav a { text-decoration: none; padding: 4px 0; color: var(--wax-muted); }
.foot-links nav a:hover { color: var(--wax-ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-contact { grid-column: 9 / -1; font-size: var(--step-small); color: var(--wax-muted); display: flex; flex-direction: column; gap: 6px; }
.foot-contact a { color: var(--wax-ink); }
.foot-last { margin-top: 56px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--step-small); color: var(--wax-muted); }
.foot-last .btn { min-height: 46px; padding: 0 28px; font-size: var(--step-small); --c: var(--wax-ink); --t: var(--wax); }
.foot-last .btn:hover { --c: #333; }

/* ---------- Entradas por seção (no celular o conteúdo já aparece pronto) ---------- */
@media (min-width: 681px) {
  .js [data-r] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-r].in { opacity: 1; transform: none; }
  .js [data-r="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-r="mask"].in { clip-path: inset(0 0 0 0); }
  /* Primeira dobra: entra no carregamento, sem esperar rolagem */
  .js .hero [data-r] { transition-duration: 900ms; }
}

/* ---------- Telas menores ---------- */
@media (max-width: 1080px) {
  .top-links { display: none; }
  .hero { min-height: 0; padding-top: 24px; }
  .hero-text, .hero-feed { grid-column: 1 / -1; }
  .hero-feed { justify-self: start; }
  .hive { left: 20%; top: auto; height: 62%; bottom: -40px; }
  .pain-head { grid-column: 1 / -1; }
  .pain-pic { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .calc-head, .calc-out { grid-column: 1 / -1; }
  .calc-out { margin-top: 56px; }
  .how-text, .stage { grid-column: 1 / -1; }
  .connect .wrap { grid-template-columns: 1fr; min-height: 0; padding-block: 56px; }
  .connect-copy { padding: 0; }
  .uses-head { grid-column: 1 / -1; margin-bottom: 40px; }
  .tiles { grid-column: 1 / -1; }
  .safe-head, .safe-list { grid-column: 1 / -1; }
  .safe-ui { grid-column: 1 / -1; grid-row: auto; margin-top: 56px; }
  .price-head { grid-column: 1 / -1; }
  .price-fig { grid-column: 1 / -1; margin-top: 64px; }
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .faq-list { grid-column: 1 / -1; }
  .coupon { grid-column: 1 / -1; }
  .foot-links nav { grid-column: span 3; }
  .foot-contact { grid-column: 1 / -1; }
  .foot-mark { flex-direction: column; align-items: flex-start; min-height: 0; }
  .foot-mark img { height: 160px; }
  .foot-mark p { font-size: 19vw; }
  .faq-pic { display: none; }
}
@media (max-width: 680px) {
  :root { --gap: 14px; }
  .top-in { display: none; }
  .hero h1 { font-size: clamp(3.25rem, 15vw, 4.5rem); }
  .hive { left: -10%; right: -30%; height: 45%; }
  .pain-list { margin-top: 56px; }
  .pain-list li { grid-template-columns: 1fr; padding: 24px 18px; }
  .calc-num { font-size: 30vw; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
  .tile.wide { grid-column: 1 / -1; order: -1; }
  .tile .face { aspect-ratio: 3 / 4; padding: 6%; }
  .tile figcaption b { font-size: var(--step-body); }
  .tile figcaption span { font-size: var(--step-small); }
  [data-ui].mini { font-size: 11.5px; padding: 10px; gap: 7px; }
  [data-ui] .feed-stats strong { font-size: 22px; }
  .safe-list { grid-template-columns: 1fr; }
  .cells2 { grid-template-columns: 1fr; }
  .cells2 a { min-height: 60px; }
  .figure { font-size: 22vw; }
  .fig-wrap { --hw: 24vw; }
  .price-fig .btn { width: 100%; }
  .faq summary { font-size: var(--step-body); min-height: 64px; padding: 18px 20px; }
  .faq details p { padding: 0 20px 20px; }
  .coupon { grid-template-columns: 1fr; }
  .coupon::before, .coupon::after { left: auto; top: auto; transform: none; }
  .coupon::before { left: -14px; top: calc(var(--cut, 300px) - 14px); }
  .coupon::after { right: -14px; bottom: auto; top: calc(var(--cut, 300px) - 14px); }
  .perf { left: 22px; right: 22px; top: var(--cut, 300px); bottom: auto; transform: translateY(-50%); flex-direction: row; }
  .coupon-l { padding: 32px 24px 40px; }
  .coupon form { padding: 40px 24px 28px; }
  .coupon input { min-height: 54px; }
  .foot-mark img { height: 120px; }
  .foot-mark p { font-size: 22vw; }
  .foot-links nav { grid-column: span 6; }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile.wide { grid-column: auto; }
  .tile .face { aspect-ratio: auto; min-height: 220px; padding: 20px 16px; }
  .plate { aspect-ratio: auto; padding: 24px 8%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-r], .js [data-r="mask"] { opacity: 1; transform: none; clip-path: none; }
  .js .band:not(.in) i { transform: none; }
}

/* =====================================================================
   CAMADA FUTURISTA — movimento que mostra o produto funcionando
   ===================================================================== */

/* Barra fixa que ganha vidro ao rolar */
.top { position: sticky; top: 0; z-index: 50; padding: 0; transition: background-color 300ms ease, backdrop-filter 300ms ease; }
.top-in-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 16px; }
.top.scrolled { background: rgba(18,18,18,.9); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* Hero com o enxame de partículas */
.hero { min-height: calc(100svh - 78px); padding-block: 24px 96px; }
.swarm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-grid { pointer-events: none; }
.hero-text { grid-column: 1 / span 6; pointer-events: auto; }
.hero h1 { font-size: clamp(3.5rem, 8.4vw, 8.6rem); }
.split-lines .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.split-lines .ln > span { display: inline-block; }
.swarm-cap {
  position: absolute; right: var(--m); bottom: 28px; font-size: var(--step-small); color: var(--muted);
  display: flex; align-items: center; gap: 10px; transition: opacity 400ms ease;
}
.swarm-cap::before { content: ""; width: 10px; height: 11px; clip-path: var(--hex); background: var(--accent); }

/* Ao vivo */
.live { padding-block: clamp(72px, 8vw, 120px); background: #161616; position: relative; overflow: hidden; }
.live .grid { row-gap: 40px; align-items: center; }
.live-head { grid-column: 1 / span 5; }
.live-note { margin-top: 20px; color: var(--muted); font-size: var(--step-small); max-width: 36ch; }
.live-stats { grid-column: 1 / span 6; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.live-stats strong { display: block; font: 500 clamp(2.75rem, 5vw, 4.5rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.live-stats span { display: block; margin-top: 10px; color: var(--ink); max-width: 14ch; }
.live-stats strong.bump { animation: bump 600ms var(--ease-out); }
@keyframes bump { 0% { transform: translateY(0); } 30% { transform: translateY(-6px); color: #fff; } 100% { transform: none; } }
.live-feed { grid-column: 8 / -1; grid-row: 1 / span 2; }
[data-ui] .rec { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #4ec98a; }
[data-ui] .rec i { width: 8px; height: 8px; border-radius: 50%; background: #4ec98a; animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(78,201,138,.5); } 50% { opacity: .6; box-shadow: 0 0 0 6px rgba(78,201,138,0); } }
[data-ui] .feed-list { height: 300px; }

/* Faixa de conectores */
.marquee { padding-block: 40px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.mq-row { overflow: hidden; }
.mq-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: mq 48s linear infinite; will-change: transform; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 56s; }
.mq-item { font: 300 clamp(2.5rem, 6vw, 5.5rem)/1.1 var(--f-display); letter-spacing: -0.03em; white-space: nowrap; color: var(--ink); }
.mq-row.rev .mq-item { color: #f1b44a; filter: url(#contorno-fino); }
.mq-hex { width: 22px; height: 25px; flex: none; clip-path: var(--hex); background: var(--accent); }
.mq-row.rev .mq-hex { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* Tarefas riscadas */
.pain-list .chore { color: var(--wax-ink); transition: color 600ms ease; }
.strike { position: relative; background-image: linear-gradient(var(--accent-deep), var(--accent-deep)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 3px; transition: background-size 900ms var(--ease-expo); }
.pain-list li.done .strike { background-size: 100% 3px; }
.pain-list li.done .chore { color: #77736a; }
.pain-list .fix { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .pain-list li:not(.done) .fix { opacity: .15; transform: translateX(24px); }

/* Medidor de dias */
.meter { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; margin-top: 28px; max-width: 520px; }
.meter i { aspect-ratio: 0.866; clip-path: var(--hex); background: rgba(18,18,18,.18); transition: background-color 300ms ease, transform 400ms var(--ease-out); }
.meter i.on { background: #121212; transform: scale(1.06); }

/* Cena em rede */
.net { position: relative; background: var(--bg); }
.net-pin { min-height: 100svh; display: flex; align-items: center; padding-block: 64px; }
.net-grid { align-items: center; row-gap: 40px; width: 100%; }
.net-text { grid-column: 1 / span 4; }
.net-steps { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.net-steps li { padding: 18px 20px; background: transparent; transition: background-color 400ms ease, opacity 400ms ease; opacity: .45; }
.net-steps li.on { background: var(--surface); opacity: 1; }
.net-steps b { display: block; font-weight: 500; }
.net-steps span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--step-small); }
.net-steps li.on span { color: var(--ink); }
.net-stage { grid-column: 5 / -1; }
.netsvg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--f-text); }
.netsvg .edge { fill: none; stroke: #343434; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.netsvg .edge.on { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-expo); }
.netsvg .flow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 34; opacity: 0; animation: flow 1.6s linear infinite; }
.netsvg .flow.on { opacity: 1; transition: opacity 600ms ease 500ms; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.netsvg .node { opacity: .08; transform-box: fill-box; transform-origin: center; transform: scale(.82); transition: opacity 600ms ease, transform 700ms var(--ease-expo); }
.netsvg .node.on { opacity: 1; transform: none; }
.netsvg .n-you { fill: #262626; }
.netsvg .n-ask { fill: #1c1c1c; stroke: rgba(255,255,255,.1); }
.netsvg .n-orch { fill: #1c1c1c; stroke: var(--accent); stroke-width: 2; }
.netsvg .n-core { fill: var(--accent); }
.netsvg .node.on .n-core { animation: core 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.netsvg .n-agent { fill: var(--accent); }
.netsvg .n-tool { fill: #1c1c1c; stroke: rgba(255,255,255,.14); }
.netsvg .tick { opacity: 0; transition: opacity 400ms ease 600ms; }
.netsvg .node.on .tick { opacity: 1; }
.netsvg .n-ok { fill: #4ec98a; }
.netsvg .n-okline { fill: none; stroke: #121212; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.netsvg .n-status { fill: #4ec98a; }
.netsvg text { fill: var(--ink); }
.netsvg .t-strong { font-size: 18px; font-weight: 500; }
.netsvg .t-sm { font-size: 15px; fill: #c9c9c9; }
.netsvg .t-h { font-size: 16px; fill: var(--accent); font-weight: 500; }
.netsvg .t-in { font-size: 16px; fill: #121212; font-weight: 500; }
.netsvg .t-dark { font-size: 17px; fill: #0b2a1a; font-weight: 500; }

/* Cards que respondem ao mouse */
.tilt .face { transform-style: preserve-3d; transition: transform 500ms var(--ease-out); will-change: transform; position: relative; }
.tilt .face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 60%); }
.tilt:hover .face::after { opacity: 1; }

/* Botões magnéticos */
.magnetic { transition: transform 300ms var(--ease-out), background-color var(--t-hover) ease; }

/* Títulos palavra por palavra */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; }

@media (max-width: 1080px) {
  .hero-text { grid-column: 1 / -1; }
  .hero { min-height: 0; align-items: flex-start; padding-top: 48px; padding-bottom: 420px; }
  .live-head, .live-stats, .live-feed { grid-column: 1 / -1; grid-row: auto; }
  .net-text, .net-stage { grid-column: 1 / -1; }
  .net-pin { min-height: 0; padding-block: var(--section); }
}
@media (max-width: 680px) {
  .hero { min-height: 0; padding-bottom: 320px; }
  .live-stats { grid-template-columns: 1fr; gap: 24px; }
  .live-stats div { display: flex; align-items: baseline; gap: 16px; }
  .live-stats span { margin-top: 0; }
  .mq-item { font-size: 2.25rem; }
  .meter { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .swarm-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .netsvg .node, .netsvg .flow, .netsvg .edge { opacity: 1; transform: none; stroke-dashoffset: 0; }
  .js .pain-list li:not(.done) .fix { opacity: 1; transform: none; }
}

/* Primeira dobra: a função que gira e as ferramentas */
.hero-rot { margin-top: 36px; font: 300 var(--step-lead)/1.3 var(--f-display); letter-spacing: -0.01em; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); }
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--accent); font-weight: 500; }
.rot > span { grid-area: 1 / 1; display: inline-block; white-space: nowrap; }
.rot > span.out { animation: rot-out 500ms var(--ease-in-out) forwards; }
.rot > span.in { animation: rot-in 600ms var(--ease-expo) 220ms both; }
@keyframes rot-out { to { transform: translateY(-110%); opacity: 0; } }
@keyframes rot-in { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-lead { margin-top: 20px; font-size: var(--step-body); line-height: 1.55; color: #cfcfcf; max-width: 44ch; }
.hero-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 36px; }
.hero-tools li { font-size: var(--step-small); color: var(--ink); padding: 8px 14px; border: 1px solid rgba(241,180,74,.35); border-radius: 999px; background: rgba(18,18,18,.6); }

/* =====================================================================
   A HISTÓRIA DA COLMEIA — texto rola, ilustração fica parada e troca
   ===================================================================== */
.story { background: var(--hive); color: var(--hive-ink); padding-block: var(--section); }
.story-head { max-width: 900px; }
.story-head p { margin-top: 28px; font-size: var(--step-lead); line-height: 1.4; max-width: 46ch; color: rgba(250,231,191,.9); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap) clamp(32px, 5vw, 80px); margin-top: 64px; }
.story-vis { position: sticky; top: 14vh; height: 72vh; align-self: start; }
.story-vis .scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.94); transition: opacity 700ms ease, transform 900ms var(--ease-expo); pointer-events: none; }
.story-vis .scene.on { opacity: 1; transform: none; }
.story-chs { display: flex; flex-direction: column; }
.story-ch { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: .3; transition: opacity 600ms ease; }
.story-ch.on { opacity: 1; }
.story-ch h3 { font: 300 var(--step-head)/1.05 var(--f-display); letter-spacing: -0.02em; color: #fff3da; }
.story-ch .fact { font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.story-ch .map { max-width: 44ch; padding-left: 20px; position: relative; color: rgba(250,231,191,.88); }
.story-ch .map::before { content: ""; position: absolute; left: 0; top: .35em; width: 9px; height: 10px; clip-path: var(--hex); background: var(--accent); }
.story-end { font: 300 var(--step-lead)/1.35 var(--f-display); max-width: 30ch; padding-block: 12vh 4vh; color: #fff3da; }

.scene text { font-family: var(--f-text); text-anchor: middle; }
.scene .lbl { fill: rgba(250,231,191,.75); font-size: 16px; }
/* cena 1: funções → agentes */
.s-roles .cell polygon { fill: rgba(241,180,74,.12); stroke: var(--accent); stroke-width: 2; transition: fill 600ms ease; }
.s-roles .core polygon { fill: var(--accent); }
.s-roles text { font-size: 21px; fill: #fae7bf; transition: opacity 500ms ease, transform 600ms var(--ease-expo); transform-box: fill-box; transform-origin: center; }
.s-roles .core text { fill: #2e1e07; font-weight: 500; font-size: 23px; }
.s-roles .b { opacity: 0; transform: translateY(10px); fill: var(--accent); font-weight: 500; }
.s-roles .core .b { fill: #2e1e07; }
.s-roles.flip .a { opacity: 0; transform: translateY(-10px); }
.s-roles.flip .b { opacity: 1; transform: none; }
.s-roles.flip .cell:not(.core) polygon { fill: rgba(241,180,74,.24); }
/* cena 2: a dança */
.s-dance .track { fill: none; stroke: rgba(241,180,74,.35); stroke-width: 2; stroke-dasharray: 6 8; }
.s-dance .ray { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 10; animation: flow 1.4s linear infinite; }
.s-dance .flower polygon { fill: var(--accent); animation: pulse-f 2.4s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes pulse-f { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.s-dance .bee polygon { fill: #fff3da; }
.s-dance .share { stroke: rgba(241,180,74,.6); stroke-width: 1.5; stroke-dasharray: 3 9; opacity: 0; }
.s-dance .mate polygon { fill: rgba(241,180,74,.2); stroke: var(--accent); stroke-width: 1.5; transition: fill 500ms ease; }
.s-dance.on .share { opacity: 1; animation: flow 1.2s linear infinite; transition: opacity 500ms ease var(--d); }
.s-dance.on .mate polygon { fill: var(--accent); transition-delay: calc(var(--d) + 500ms); }
/* cena 3: o hexágono */
.s-hex .circ { fill: rgba(241,180,74,.18); stroke: rgba(241,180,74,.5); stroke-width: 1.5; }
.s-hex .hexc { fill: rgba(241,180,74,.12); stroke: var(--accent); stroke-width: 1.5; transition: fill 500ms ease; transition-delay: var(--d); }
.s-hex.on .hexc { fill: var(--accent); }
/* cena 4: as guardiãs */
.s-guard .gate { fill: none; stroke: var(--accent); stroke-width: 3; }
.s-guard .gate-t { fill: var(--accent); font-size: 18px; font-weight: 500; }
.s-guard .item { animation: pass 4.8s var(--ease-in-out) infinite; animation-delay: var(--d); opacity: 0; }
.s-guard .item rect { fill: #fae7bf; }
.s-guard .item text { fill: #2e1e07; font-size: 16px; font-weight: 500; }
.s-guard .ok circle { fill: #4ec98a; }
.s-guard .ok polyline { fill: none; stroke: #0b2a1a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-guard .ok { opacity: 0; animation: okp 4.8s ease infinite; animation-delay: var(--d); }
@keyframes pass {
  0% { transform: translate(60px, 300px); opacity: 0; }
  10% { opacity: 1; }
  38%, 58% { transform: translate(300px, 300px); opacity: 1; }
  90% { transform: translate(540px, 300px); opacity: 1; }
  100% { transform: translate(560px, 300px); opacity: 0; }
}
@keyframes okp { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .story-vis { top: 72px; height: 42vh; z-index: 1; background: var(--hive); }
  .story-ch { min-height: 70vh; justify-content: flex-start; padding-top: 6vh; }
  .story-ch h3 { font-size: clamp(2rem, 8vw, 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .s-guard .item { animation: none; opacity: 1; transform: translate(300px, calc(200px + var(--d) * 40)); }
  .story-ch { opacity: 1; }
}

/* =====================================================================
   PÁGINA INTEIRA NO MESMO CLIMA: fundo escuro vivo, vidro e luz âmbar
   ===================================================================== */
body { background: #0d0d0d; }
.ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
/* grade de colmeia bem sutil por trás de tudo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33M0 16-28 0M56 16 84 0' fill='none' stroke='%23f1b44a' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
}
.hero, .live, .marquee, .net, .how, .uses, .price, .faq, .contact { background: transparent; }

/* vidro: o cartão padrão da parte de baixo */
.glass {
  background: rgba(255,255,255,.035); border: 1px solid rgba(241,180,74,.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color 300ms ease, box-shadow 400ms ease, background-color 300ms ease;
}
.glass:hover { border-color: rgba(241,180,74,.5); box-shadow: 0 0 0 1px rgba(241,180,74,.15), 0 18px 60px rgba(241,180,74,.08); }

/* A rotina: escura, com as linhas em vidro */
.pain { background: transparent; color: var(--ink); }
.pain-head p { color: #d6d6d6; }
.pain-pic figcaption { color: var(--muted); }
.pain-list { gap: 10px; }
.pain-list li, .pain-list li:nth-child(odd) { background: rgba(255,255,255,.035); border: 1px solid rgba(241,180,74,.12); }
.pain-list li.done { border-color: rgba(241,180,74,.32); }
.pain-list .chore { color: var(--ink); }
.pain-list li.done .chore { color: #7d7d7d; }
.strike { background-image: linear-gradient(90deg, #f1b44a, #ffd98a); }
.pain-list .h { color: var(--accent); }

/* A conta: escura, número aceso */
.calc { background: transparent; color: var(--ink); position: relative; }
.calc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 75% 45%, rgba(241,180,74,.16), transparent 70%); }
.calc-num { color: var(--accent); text-shadow: 0 0 40px rgba(241,180,74,.35); }
.calc-num small { color: var(--ink); text-shadow: none; }
.calc-note { color: var(--muted); }
.calc-form output { color: var(--accent); }
.calc-form input[type=range]::-webkit-slider-runnable-track { background: rgba(241,180,74,.25); }
.calc-form input[type=range]::-moz-range-track { background: rgba(241,180,74,.25); }
.calc-form input[type=range]::-webkit-slider-thumb { background: var(--accent); }
.calc-form input[type=range]::-moz-range-thumb { background: var(--accent); }
.meter i { background: rgba(241,180,74,.12); }
.meter i.on { background: var(--accent); box-shadow: 0 0 12px rgba(241,180,74,.6); }

/* A história: o mesmo fundo vivo, com um halo de mel */
.story { background: transparent; position: relative; }
.story::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 25% 40%, rgba(150,97,23,.28), transparent 70%); }
.story-vis { background: transparent; }

/* Teste: palco do chat vira vidro com hexágono aceso */
.stage { background: rgba(255,255,255,.03); border: 1px solid rgba(241,180,74,.2); }
.stage::before { background: rgba(241,180,74,.1); left: 30%; top: 18%; width: 90%; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-8%, -6%) rotate(8deg); } }

/* Conectores */
.connect { background: transparent; color: var(--ink); }
.plate { background: rgba(255,255,255,.03); border: 1px solid rgba(241,180,74,.2); }
.plate::before { background: rgba(241,180,74,.7); animation: spin 26s linear infinite; }
.plate::after { content: ""; position: absolute; width: 72%; aspect-ratio: .866; clip-path: var(--hex); left: 50%; top: 50%; transform: translate(-50%, -50%); background: #151412; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .6; } }
.plate > * { z-index: 1; }
.tabs button { color: var(--muted); }
.tabs button:hover, .tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"] { text-decoration-color: var(--accent); }
.connect-copy .also { color: var(--muted); }
.cells2 a:first-child { background: var(--accent); color: var(--accent-ink); }
.cells2 a:first-child:hover { background: #f6c86f; }
.cells2 a:last-child { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid rgba(241,180,74,.25); }
.cells2 a:last-child:hover { background: rgba(241,180,74,.1); }

/* Exemplos: abas e cards de vidro */
.seg { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border: 1px solid rgba(241,180,74,.25); border-radius: 999px; background: rgba(255,255,255,.03); flex-wrap: wrap; }
.seg button { font: 500 var(--step-small)/1 var(--f-text); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: background-color 250ms ease, color 250ms ease; }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tiles[hidden] { display: none; }
.tile .face, .tile.f1 .face, .tile.f2 .face, .tile.f3 .face { background: rgba(255,255,255,.03); border: 1px solid rgba(241,180,74,.16); }
.tile:hover .face { border-color: rgba(241,180,74,.55); box-shadow: 0 0 50px rgba(241,180,74,.1); }
.tile .face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 110%, rgba(241,180,74,.16), transparent 70%); pointer-events: none; }
.tiles.swap .tile { animation: ui-in 600ms var(--ease-out) both; }
.tiles.swap .tile:nth-child(2) { animation-delay: 60ms; } .tiles.swap .tile:nth-child(3) { animation-delay: 120ms; }
.tiles.swap .tile:nth-child(4) { animation-delay: 180ms; } .tiles.swap .tile:nth-child(5) { animation-delay: 240ms; }

/* Aprovações: escuro com linha de leitura passando */
.safe { background: transparent; color: var(--ink); position: relative; }
.safe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 80% 50%, rgba(241,180,74,.1), transparent 70%); }
.safe-list p { color: #cfcfcf; }
.safe-list b { color: var(--ink); }
[data-ui].queue { position: relative; box-shadow: 0 0 0 1px rgba(241,180,74,.2), 0 30px 80px rgba(0,0,0,.5); }
[data-ui].queue::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; top: -60px; background: linear-gradient(transparent, rgba(241,180,74,.1), transparent); animation: scan 3.6s linear infinite; pointer-events: none; }
@keyframes scan { to { top: 100%; } }

/* Preço */
.figure { color: var(--ink); text-shadow: 0 0 60px rgba(241,180,74,.25); }
.price-fig .over { box-shadow: 0 0 0 2px var(--accent); }

/* Dúvidas: vidro, aberta com borda acesa */
.faq details { background: rgba(255,255,255,.035); border: 1px solid rgba(241,180,74,.14); }
.faq summary:hover { background: rgba(241,180,74,.06); }
.faq details[open] { background: rgba(241,180,74,.08); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 40px rgba(241,180,74,.08); }
.faq details[open] summary { color: var(--accent); }

/* Cupom: vidro com borda de luz girando */
.coupon { background: rgba(18,18,18,.75); color: var(--ink); isolation: isolate; border-radius: 0; }
.coupon > .glow { position: absolute; inset: -2px; z-index: -1; overflow: hidden; }
.coupon > .glow::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 70%, #f1b44a 82%, #ffe0a3 86%, transparent 92%); animation: spin2 5s linear infinite; }
.coupon > .glow::after { content: ""; position: absolute; inset: 2px; background: #121212; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.coupon::before, .coupon::after { background: #0d0d0d; z-index: 2; }
.perf i { background: rgba(241,180,74,.5); }
.coupon-l h2 { color: var(--accent); }
.coupon input, .coupon textarea { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid rgba(241,180,74,.2); }
.coupon ::placeholder { color: #9a9a9a; }
.coupon input:focus-visible, .coupon textarea:focus-visible { outline: 2px solid var(--accent); }
.coupon button { background: var(--accent); color: var(--accent-ink); }
.coupon button:hover { background: #f6c86f; }
.coupon .note a { color: var(--accent); }

/* Rodapé: escuro, marca em contorno que acende */
.foot { background: transparent; color: var(--ink); border-top: 1px solid rgba(241,180,74,.15); }
/* Contorno feito por filtro SVG: o -webkit-text-stroke mostrava as linhas internas onde as curvas da fonte se sobrepõem. */
.foot-mark p, .foot-mark p b { color: #f1b44a; }
.foot-mark p { filter: url(#contorno); }
.foot-mark:hover p, .foot-mark.in p { filter: url(#contorno-cheio); }
.foot-links nav a, .foot-contact, .credits, .foot-last { color: var(--muted); }
.foot-links nav a:hover { color: var(--accent); }
.foot-contact a { color: var(--ink); }
.foot-last .btn { --c: var(--accent); --t: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .plate::before, .plate::after, .coupon > .glow::before, [data-ui].queue::after, .stage::before { animation: none; }
}

.figure-word { font-size: clamp(4rem, 9vw, 9rem); letter-spacing: -0.04em; }
@media (max-width: 680px) { .figure-word { font-size: 17vw; } }

/* Formulário: isca para robôs (fora da tela, nunca visível) e mensagem de resultado */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--step-small); padding: 10px 14px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.04); overflow-wrap: anywhere; }
.form-status.ok { border-left-color: #4ec98a; }
.form-status.erro { border-left-color: #e5593f; }
.coupon button:disabled { opacity: .6; cursor: progress; }

/* Páginas legais (privacidade e termos) */
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-block: 18px; }
.legal { padding-block: clamp(32px, 6vw, 80px) clamp(48px, 8vw, 112px); }
.legal-in { max-width: 74ch; }
.legal h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); margin: 12px 0 8px; text-wrap: balance; }
.legal .legal-data { color: var(--muted); font-size: var(--step-small); margin-bottom: 40px; }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 44px 0 12px; font-weight: 500; line-height: 1.2; }
.legal p, .legal li { color: #d6d4cf; overflow-wrap: break-word; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.25em; display: grid; gap: 8px; list-style: disc; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 28px 48px; border-top: 1px solid rgba(241,180,74,.15); color: var(--muted); font-size: var(--step-small); }
.legal-foot a { color: var(--muted); }
.legal-foot a:hover { color: var(--accent); }