:root {
  --bg: #0b0605;
  --bg-2: #140a06;
  --orange: #ff7a1a;
  --orange-hot: #ff5a00;
  --amber: #ffb061;
  --text: #fff4ea;
  --muted: #cdb8a8;
  --glass: rgba(255, 255, 255, .06);
  --glass-strong: rgba(255, 255, 255, .09);
  --line: rgba(255, 150, 70, .26);
  --radius: 28px;
  --head: 72px;
  --foot: 56px;
  --gap: clamp(12px, 3vw, 44px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%);
  color: var(--text);
  font: 400 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }

/* ---------- Fundo ---------- */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .85; will-change: transform; }
.orb-1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, var(--orange-hot), transparent 68%); animation: float1 18s ease-in-out infinite alternate; }
.orb-2 { width: 40vw; height: 40vw; right: -10vw; top: 22vh;
  background: radial-gradient(circle, var(--orange), transparent 66%); animation: float2 22s ease-in-out infinite alternate; }
.orb-3 { width: 34vw; height: 34vw; left: 30vw; bottom: -16vw;
  background: radial-gradient(circle, #ff9a3c, transparent 65%); opacity: .6; animation: float3 26s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes float1 { to { transform: translate(10vw, 12vh) scale(1.15); } }
@keyframes float2 { to { transform: translate(-12vw, -10vh) scale(1.1); } }
@keyframes float3 { to { transform: translate(-14vw, -8vh) scale(1.2); } }

/* ---------- Cabeçalho e rodapé ---------- */
.top, .bottom {
  position: fixed; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gap);
}
.top { top: 0; height: var(--head); }
.bottom { bottom: 0; height: var(--foot); justify-content: center; gap: 22px; color: var(--muted); font-size: 13px; }
.brand { display: flex; align-items: center; gap: 9px; font: 700 20px Sora, Inter, sans-serif; color: var(--text); }
.brand svg { color: var(--orange); }
.brand b { color: var(--orange); font-weight: 800; }
.count b { color: var(--text); font-weight: 600; }
.hint { transition: opacity .4s; }
.hint.off { opacity: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px Inter, sans-serif; color: #1a0a02;
  background: linear-gradient(135deg, #ffa24d, var(--orange-hot));
  box-shadow: 0 8px 28px rgba(255, 90, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 90, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn:focus-visible, .brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-ghost {
  color: var(--text); background: var(--glass); border: 1px solid var(--line);
  box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: var(--glass-strong); box-shadow: none; }

/* ---------- Palco e cards (glassmorphism) ---------- */
.stage { position: fixed; inset: 0; z-index: 5; outline: none; }

.card {
  position: absolute;
  top: var(--head); bottom: var(--foot); left: var(--gap); right: var(--gap);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid var(--line);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 60px rgba(255, 122, 26, .06);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(7%) scale(.95); filter: blur(6px);
  transition: transform .8s var(--ease), opacity .6s var(--ease), filter .6s var(--ease), visibility 0s .8s;
}
.card::before { /* brilho de borda superior */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(80% 50% at 50% -10%, rgba(255, 160, 80, .22), transparent 70%);
}
.card.is-before { transform: translateY(-7%) scale(.95); }
.card.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; filter: none;
  transition: transform .8s var(--ease), opacity .6s var(--ease) .12s, filter .6s var(--ease) .12s, visibility 0s;
}

.card-body {
  position: relative; height: 100%;
  padding: clamp(22px, 4.2vw, 64px);
  display: flex; flex-direction: column; justify-content: center; justify-content: safe center; gap: clamp(14px, 2.4vh, 26px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.card-body::-webkit-scrollbar { display: none; }
.card-body.center { align-items: center; text-align: center; }

/* entrada escalonada do conteúdo */
.rise { opacity: 0; transform: translateY(22px); }
.card.is-active .rise {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(.28s + var(--i, 0) * .09s);
}

/* ---------- Tipografia ---------- */
.eyebrow {
  margin: 0; font: 600 12px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px; }
.center .eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px; }
h1, h2, h3 { margin: 0; font-family: Sora, Inter, sans-serif; line-height: 1.08; letter-spacing: -.02em; }
h1 { font-size: clamp(32px, 5.2vw, 72px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.8vw, 52px); font-weight: 800; max-width: 22ch; }
h2 em, h1 em { font-style: normal; color: var(--orange);
  background: linear-gradient(90deg, #ffb061, var(--orange-hot)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h3 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.lead { font-size: clamp(16px, 1.55vw, 20px); color: var(--muted); max-width: 52ch; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.center .actions { justify-content: center; }
.fine { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ---------- Hero ---------- */
.hero { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 60px); }
.hero .col { flex: 1 1 0; display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 24px); min-width: 0; }
.hero .visual { align-items: center; }

/* ---------- Mini-cards internos ---------- */
.glass-in {
  background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 170, 100, .2);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 30px rgba(0, 0, 0, .25);
}
.tile { padding: clamp(18px, 2vw, 28px); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.tile p { color: var(--muted); font-size: 15px; }
.num { font: 800 13px Sora, sans-serif; color: var(--orange); letter-spacing: .08em; }
.ico { width: 30px; height: 30px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.grid { display: grid; gap: clamp(12px, 1.6vw, 22px); width: 100%; max-width: 1180px; margin-top: 6px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.steps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); width: 100%; max-width: 1180px; }
.steps .num { font-size: 40px; line-height: 1; }

/* ---------- Planos ---------- */
.plans .tile { gap: 12px; }
.price { font: 700 24px Sora, sans-serif; color: var(--text); }
.plans ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; color: var(--muted); font-size: 15px; }
.plans li { padding-left: 24px; position: relative; }
.plans li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg) translateY(-50%); }
.featured { border-color: rgba(255, 140, 50, .7); background: linear-gradient(150deg, rgba(255, 122, 26, .22), rgba(255, 255, 255, .04));
  box-shadow: 0 0 0 1px rgba(255, 140, 50, .25), 0 18px 50px rgba(255, 90, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22); position: relative; }
.badge { position: absolute; top: -12px; right: 18px; background: linear-gradient(135deg, #ffa24d, var(--orange-hot)); color: #1a0a02; font: 700 11px Inter; padding: 5px 12px; border-radius: 999px; letter-spacing: .04em; }

/* ---------- Mock de conversa ---------- */
.chat { width: min(100%, 380px); padding: 18px; display: flex; flex-direction: column; gap: 10px; transform: rotate(2deg); }
.chat-head { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5dffa0; box-shadow: 0 0 10px #5dffa0; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.msg.in { align-self: flex-start; background: rgba(255, 255, 255, .1); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: linear-gradient(135deg, rgba(255, 150, 60, .9), rgba(255, 90, 0, .9)); color: #1a0a02; border-bottom-right-radius: 4px; font-weight: 500; }
.pay { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(93, 255, 160, .12); border: 1px solid rgba(93, 255, 160, .35); font-size: 14px; color: #b9ffd6; }

/* ---------- Responsivo ---------- */
/* Telas estreitas OU em pé (inclui celular com "site para computador") */
@media (max-width: 960px), (max-aspect-ratio: 1/1) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .hero { flex-direction: column; justify-content: center; }
  .hero .col { flex: 0 0 auto; }
  .hero .visual { width: 100%; }
  .chat { transform: none; width: min(100%, 440px); }
  .tile p { font-size: 14px; }
}
@media (max-width: 700px) {
  .g3, .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --head: 62px; --foot: 46px; --radius: 22px; --gap: 12px; }
  .btn-sm { padding: 9px 14px; font-size: 13px; }
  .card-body { padding: 20px 18px; gap: 12px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h3 { font-size: 16px; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .g4 { grid-template-columns: 1fr; }
  .grid, .steps { gap: 10px; }
  .tile { padding: 12px 14px; gap: 5px; }
  .tile p { font-size: 13px; line-height: 1.4; }
  .steps .num { font-size: 26px; }
  .price { font-size: 20px; }
  .plans ul { gap: 6px; font-size: 13px; }
  .hint { display: none; }
  .hero .visual { display: none; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .hero .visual { display: none; }
}
@media (max-height: 640px) and (min-width: 961px) {
  :root { --head: 60px; --foot: 44px; }
  .tile p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .card, .card.is-active, .rise, .card.is-active .rise { transition: opacity .2s linear; transform: none; filter: none; transition-delay: 0s; }
  .dot { animation: none; }
}

/* Telas altas e em pé, mas largas (ex.: celular com "site para computador", tablet em pé):
   escala o conteúdo para ocupar o card em vez de ficar minúsculo no meio */
@media (max-aspect-ratio: 1/1) and (min-width: 700px) {
  .card-body { padding: clamp(32px, 5vw, 64px); gap: 28px; }
  h1 { font-size: clamp(44px, 7.4vw, 84px); }
  h2 { font-size: clamp(34px, 5.6vw, 64px); max-width: 20ch; }
  h3 { font-size: clamp(20px, 2.6vw, 28px); }
  .eyebrow { font-size: 14px; }
  .lead { font-size: clamp(19px, 2.6vw, 28px); }
  .btn { font-size: 18px; padding: 18px 34px; }
  .btn-lg { font-size: 19px; }
  .tile { padding: 26px; gap: 12px; }
  .tile p, .split .tile p { font-size: clamp(16px, 2vw, 20px); }
  .plans ul, .price { font-size: clamp(18px, 2.4vw, 26px); }
  .steps .num { font-size: 54px; }
  .chat { width: min(100%, 560px); padding: 24px; }
  .msg { font-size: 17px; }
  .pay { font-size: 17px; }
}

/* Celular/tablet: evita emendas de renderização (faixa clara cortando cards) ao rolar dentro do card.
   Causa: backdrop-filter + filter blur + mix-blend-mode sob conteúdo rolável e orbes animados.
   Mantém o visual "vidro" com fundo translúcido, sem desfoque em tempo real. */
@media (max-width: 960px), (max-aspect-ratio: 1/1), (pointer: coarse) {
  .card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    filter: none !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)),
      rgba(26, 13, 8, .62);
    transition: transform .8s var(--ease), opacity .6s var(--ease), visibility 0s .8s;
  }
  .card.is-active { transition: transform .8s var(--ease), opacity .6s var(--ease) .12s, visibility 0s; }
  .orb { filter: none; will-change: auto; }
  .grain { display: none; }
  .btn-ghost, .dtoast { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Celular: sem deslocamento/escala nas animações de entrada.
   O Chrome mobile deixava um resquício de 22px (o offset do .rise) do card na posição antiga,
   que parecia um card duplicado por instantes. Aqui só há fade (opacidade), sem mover nada. */
@media (max-width: 960px), (max-aspect-ratio: 1/1), (pointer: coarse) {
  .card, .card.is-before { transform: none; }
  .rise { transform: none; }
  .card.is-active .rise {
    transform: none;
    transition: opacity .5s var(--ease);
    transition-delay: calc(.15s + var(--i, 0) * .06s);
  }
}