:root {
  --fundo:   #050706;
  --verde:   #4ade80;
  --lima:    #c8f52a;
  --ciano:   #22e3d6;
  --branco:  #ffffff;
  --t2:      #8a938e;
  --borda:   rgba(255,255,255,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: #0b0f0c;
  color: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── CENA 3D ────────────────────────────────── */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ─── SAÍDA DO HERO ──────────────────────────── */
/* Régua do site de referência: a unidade é a largura da tela dividida por 108
   (13,33 px em 1440). Os tamanhos abaixo são múltiplos dela. */
.saida-fundo,
.saida-frente {
  --u: calc(100vw / 108);
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.saida-fundo {
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * .2);
  background: #0b0f0c;
  opacity: 0;
}
.saida-trilho { overflow: hidden; padding-top: calc(var(--u) * .9); margin-top: calc(var(--u) * -.9); }
.saida-faixa {
  display: inline-flex;
  white-space: nowrap;
  font-size: calc(var(--u) * 5.4);
  line-height: .92;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * -.12);
  will-change: transform;
}
.saida-faixa i { font-style: normal; opacity: .45; padding: 0 .1em; }
/* a linha de cima é a segunda voz: serifada de título, na cor de destaque */
.saida-faixa-a {
  color: var(--lima);
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--u) * 6.1);
  letter-spacing: calc(var(--u) * -.06);
}
.saida-faixa-b { color: #f1f4ee; }

.saida-frente { z-index: 2; visibility: hidden; }
.saida-marca {
  position: absolute;
  left: 50%; top: 50%;
  /* a logo cabe dentro do quadro do servidor (33% da largura): assim não encosta na faixa */
  width: min(calc(var(--u) * 25), 27vw);
  transform: translate(-50%, -50%);
  overflow: visible;
}
.saida-rotulo {
  position: absolute;
  left: 50%; top: calc(50% - 16.5vh - var(--u) * 2.4);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .5);
  font-size: calc(var(--u) * .625);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f1f4ee;
  white-space: nowrap;
}

/* chamada grande abaixo do cartão: aparece quando a marca termina de se escrever.
   Fica no meio exato entre a base do cartão (50% + 16,5%) e o começo da seção seguinte,
   que chega a 33,5% da altura abaixo dela: centro em 50% + 16,5% + 16,75%. */
.saida-chamada {
  --sc-fundo: var(--lima);
  --sc-tinta: #000;
  position: absolute;
  left: 50%;
  top: 83.25%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  min-height: max(87px, calc(var(--u) * 7.2));
  padding: 0 calc(var(--u) * 3.4);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  font-size: max(19px, calc(var(--u) * 1.625));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sc-tinta);
  background: var(--sc-fundo);
  box-shadow: 0 0 0 0 rgba(200, 245, 42, .55), 0 18px 60px rgba(200, 245, 42, .28);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: saida-chamada-pulso 2.4s ease-out infinite;
}
.saida-chamada::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10%; right: -10%;
  top: 0; bottom: 0;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  background: #fff;
  transform: translateY(104%);
  transition: transform .7s cubic-bezier(.19, 1, .22, 1), border-radius .7s cubic-bezier(.19, 1, .22, 1);
}
.saida-chamada-rotulo { position: relative; }
.saida-chamada-seta {
  flex: none;
  width: 1.3em; height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.19, 1, .22, 1);
}
@media (hover: hover) {
  .saida-chamada:hover::before { transform: translateY(0); border-radius: 0; transition-duration: .42s; }
  .saida-chamada:hover .saida-chamada-seta { transform: translateX(.3em); }
}
@keyframes saida-chamada-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(200, 245, 42, .55), 0 18px 60px rgba(200, 245, 42, .28); }
  70%  { box-shadow: 0 0 0 18px rgba(200, 245, 42, 0), 0 18px 60px rgba(200, 245, 42, .28); }
  100% { box-shadow: 0 0 0 18px rgba(200, 245, 42, 0), 0 18px 60px rgba(200, 245, 42, .28); }
}
@media (prefers-reduced-motion: reduce) {
  .saida-chamada { animation: none; }
}

/* a janela do hero dura duas telas: uma para a transição, outra para o conjunto sair */
body #secoes > .rx-janela { height: 205svh; }
body #secoes > .rx-janela::after { display: none; }

/* ─── TOPO ───────────────────────────────────── */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 0;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }

.marca {
  display: block;
  color: var(--branco);
  text-decoration: none;
  transition: color .35s ease, opacity .25s ease;
}
/* a logo entra como máscara: assim ela pega a cor do texto e inverte sobre seção clara */
.marca-logo {
  display: block;
  width: calc(max(100vw / 108, 9px) * 9.2);
  aspect-ratio: 453 / 160;
  background: currentColor;
  -webkit-mask: url(/landing/rdx/img/rdx-logo.svg) center / contain no-repeat;
          mask: url(/landing/rdx/img/rdx-logo.svg) center / contain no-repeat;
}

.topo-acoes { display: flex; gap: 10px; }

/* o topo fica por cima de seções claras e escuras: a rolagem avisa o que está embaixo */
.topo[data-tema="claro"] .marca { color: #050706; }
.topo[data-tema-botoes="claro"] .botao-verde { background: #050706; color: var(--lima); }
.topo[data-tema-botoes="claro"] .botao-menu { border-color: rgba(5,7,6,.7); background: rgba(200,245,42,.4); }
.topo[data-tema-botoes="claro"] .botao-menu i { background: #050706; }

.botao {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 58px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s;
}
.botao-verde { background: var(--lima); color: #000; }
.botao-verde:hover { transform: translateY(-2px); background: #dbff4d; }

.botao-menu {
  width: 58px; height: 58px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.55);
  background: rgba(5,7,6,.4);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.botao-menu i { display: block; height: 2px; background: var(--branco); border-radius: 2px; }
.botao-menu i:nth-child(1) { width: 12px; transform: translateX(6px); }
.botao-menu i:nth-child(2) { width: 16px; transform: translateX(-4px); }

/* ─── HERO ───────────────────────────────────── */
.hero {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.cartao-status {
  position: absolute;
  left: 18px; bottom: 18px;
  width: 172px;
  padding: 14px 14px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(5,7,6,.55);
  backdrop-filter: blur(10px);
}
.cartao-rotulo {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 10px;
}
.cartao-linha {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; text-transform: uppercase; letter-spacing: .6px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  animation: pulso 1.8s ease-in-out infinite;
}
@keyframes pulso {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  50%     { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.cartao-dado {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--t2);
  padding: 3px 0;
}
.cartao-dado b {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--verde);
}

.dica {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--t2);
  transition: opacity .6s ease;
}
.dica.some { opacity: 0; }
.dica-mouse {
  width: 16px; height: 24px;
  border: 1.5px solid var(--t2);
  border-radius: 9px;
  position: relative;
}
.dica-mouse::after {
  content: '';
  position: absolute;
  left: 50%; top: 5px;
  width: 2px; height: 5px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--verde);
  animation: rolinho 1.6s ease-in-out infinite;
}
@keyframes rolinho {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(7px); opacity: 0; }
}

@media (max-width: 768px) {
  /* saída do hero no celular: o quadro encolhe menos, então a logo e a faixa crescem junto */
  .saida-marca { width: 58vw; }
  .saida-faixa { font-size: 9.5vw; }
  .saida-faixa-a { font-size: 10.5vw; }
  .saida-rotulo { font-size: 9px; top: calc(50% - 37vh - 12px); }
  /* cartão de 66%: base em 50% + 33%; a seção seguinte chega 17% abaixo: centro em 91,5% */
  /* o rótulo é curto ("Ative seu cluster agora"): cabe em uma linha até 320 px de largura */
  .saida-chamada {
    top: 91.5%;
    min-height: 72px;
    padding: 0 22px;
    font-size: 14px;
    white-space: nowrap;
    max-width: 92vw;
  }
  .cartao-status { bottom: 34px; }
  .botao { height: 48px; padding: 0 16px; font-size: 12px; }
  .botao-menu { width: 48px; height: 48px; }
  .cartao-status { width: 150px; }
  .dica { display: none; }
}