/* ============================================================
   Fliper Studio: folha única do site inteiro
   Mundo visual único (escuro, gabinete de fliperama). Proposital:
   não tem tema claro.
   ============================================================ */

:root{
  color-scheme: dark;

  --ink:      #0A0713;
  --ink-1:    #100B1D;
  --ink-2:    #17102A;
  --line:     #2A1F45;
  --line-hi:  #3D2D63;

  --text:     #EDE7F7;
  --muted:    #9E95B8;
  --dim:      #6E6689;

  --magenta:  #FF2E88;
  --cyan:     #3FE0FF;
  --amber:    #FFB629;

  --display: "Bahnschrift", "Haettenschweiler", "Franklin Gothic Medium Cond", "Arial Narrow", Impact, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  --col: 1120px;
  --col-read: 720px;
  --r: 4px;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap{ width: min(100% - 40px, var(--col)); margin-inline: auto; }
.wrap-read{ width: min(100% - 40px, var(--col-read)); margin-inline: auto; }

/* Rede contra vazamento horizontal.
   Em coluna flex com align-items:flex-start (ou align-self:start), o filho
   deixa de esticar e passa a ter a largura do próprio conteúdo. Aí um
   max-width em "ch" vira largura de verdade e estoura a tela no celular.
   Item de flex/grid também não encolhe abaixo do conteúdo sem min-width:0. */
.wrap > *, .wrap-read > *{ min-width: 0; }
.hero-copy > *, .notfound > *, .endcta > *, .hero-cta > *{ max-width: 100%; }
.cta{ max-width: 100%; }

h1, h2, h3{
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0;
  line-height: .95;
}

a{ color: inherit; }
img{ max-width: 100%; height: auto; display: block; }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--magenta); color: #12040A;
  padding: 12px 18px; font-family: var(--mono); font-size: 13px;
}
.skip:focus{ left: 12px; top: 12px; }

.slot{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex; align-items: center; gap: 10px;
}
.slot::before{
  content: "";
  width: 14px; height: 2px;
  background: var(--magenta);
}

/* ============ botão ============ */
.cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--display); font-size: 22px; text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--magenta); color: #12040A;
  border: 0; border-radius: var(--r);
  padding: 16px 30px; cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.cta:hover{ background: #FF4E9C; }
.cta:disabled{ opacity: .45; cursor: default; background: var(--magenta); }
.cta .coin{ font-family: var(--mono); font-size: 13px; letter-spacing: 0; opacity: .7; }
.cta-sm{ font-size: 15px; padding: 9px 18px; }
@media (max-width: 380px){ .cta-sm{ font-size: 13px; padding: 8px 13px; } }
.cta-ghost{
  background: transparent; color: var(--text);
  border: 1px solid var(--line-hi);
}
.cta-ghost:hover{ border-color: var(--cyan); box-shadow: none; }

/* ============ marquee / nav ============ */
.marquee{
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,7,19,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.marquee .wrap{ display: flex; align-items: center; gap: 20px; height: 62px; }
.logo{
  font-family: var(--display);
  font-size: 24px; text-transform: uppercase; letter-spacing: .12em;
  display: flex; align-items: center; gap: 3px;
  text-decoration: none; margin-right: auto;
  color: var(--text);
}
.logo .logomark{
  width: 27px; height: 27px; flex: none;
  margin-right: 10px;
  /* o corpo do sprite usa currentColor: a marca acompanha a cor do texto */
}
.logo b{ line-height: 1; }
.logo span{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0;
  color: var(--magenta); align-self: flex-end; padding-bottom: 2px;
}
@media (max-width: 900px){ .logo .logomark{ width: 23px; height: 23px; margin-right: 7px; } }
.navlinks{ display: flex; gap: 26px; font-size: 14px; }
.navlinks a{ color: var(--muted); text-decoration: none; transition: color .15s; white-space: nowrap; }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color: var(--text); }

/* Abaixo de 900px os links não cabem na mesma linha do logo. Em vez de sumir
   com eles (o que deixava tablet e celular sem navegação nenhuma), viram uma
   segunda linha que rola na horizontal. Sem JavaScript, sem menu sanduíche. */
@media (max-width: 900px){
  .marquee .wrap{ flex-wrap: wrap; height: auto; padding-block: 11px; row-gap: 10px; }
  .logo{ font-size: 21px; }
  .navlinks{
    order: 3; width: 100%;
    gap: 20px; font-size: 13.5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .navlinks::-webkit-scrollbar{ display: none; }
}

/* ============ hero ============ */
.hero{ padding: 68px 0 0; }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hero-copy{ display: flex; flex-direction: column; gap: 22px; }

.badge{
  align-self: start;
  max-width: 100%;                       /* senão estoura a tela no celular */
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--amber);
  border: 1px solid rgba(255,182,41,.35);
  background: rgba(255,182,41,.07);
  border-radius: 100px; padding: 7px 16px 7px 12px;
}
.badge .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none;
}

/* O mínimo do clamp precisa caber numa tela de 320px. O display é condensado
   e o h1 tem quebras fixas: linha longa em corpo grande vaza pra fora. */
h1{ font-size: clamp(30px, 10vw, 92px); letter-spacing: -.005em; }
.hero-copy > *{ min-width: 0; }
h1 em{ font-style: normal; color: var(--magenta); }
.lede{ max-width: 62ch; font-size: clamp(17px, 2vw, 20px); color: var(--muted); margin: 0; }
.lede strong{ color: var(--text); font-weight: 600; }

.hero-cta{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-note{ font-family: var(--mono); font-size: 12.5px; color: var(--dim); max-width: 30ch; }
.caption{ font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin: 0; max-width: 80ch; }

/* ============ a máquina (demo) ============ */
.machine{
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-1);
  overflow: hidden;
}

/* ============ porta do jogo: cadastro antes de liberar ============ */
.playgate{
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,7,19,.88); backdrop-filter: blur(6px);
  padding: 20px;
}
.playgate[hidden]{ display: none; }
.playgate-box{
  width: min(100%, 340px);
  background: var(--ink-1); border: 1px solid var(--line-hi); border-radius: var(--r);
  padding: 22px 22px 20px;
}
.playgate-box h3{ font-size: 22px; margin: 10px 0 8px; }
.playgate-box p{ color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.chrome{
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; height: 40px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1A1230, #130D22);
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.dots{ display: flex; gap: 6px; }
.dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line-hi); }
.dots i:first-child{ background: var(--magenta); }
.chrome .file{ color: var(--muted); }
.chrome .run{ margin-left: auto; color: var(--amber); display: flex; align-items: center; gap: 6px; }

.stage{ display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 340px; }
@media (max-width: 780px){
  .stage{ grid-template-columns: minmax(0, 1fr); }
  .rail{ display: none; }
}
.rail{
  border-right: 1px solid var(--line); padding: 16px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85;
  color: var(--dim); background: #0D0919; overflow: hidden;
}
.rail h4{
  font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px;
}
.rail .tree div{ white-space: nowrap; }
.rail .tree .on{ color: var(--cyan); }
.log{ margin-top: 22px; }
.log p{ margin: 0; color: var(--muted); }
.log p.ok::before{ content: "✓ "; color: var(--cyan); }
.log p.run::before{ content: "› "; color: var(--amber); }

.screenwrap{ position: relative; background: #050309; }
canvas#screen{ display: block; width: 100%; height: 340px; cursor: crosshair; }
.screenwrap::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 130% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%);
}
.hintbar{
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .06em;
}

.promptbar{
  border-top: 1px solid var(--line); background: #0D0919; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.field{
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-hi); border-radius: var(--r);
  background: var(--ink); padding: 11px 13px;
  font-family: var(--mono); font-size: 13.5px;
}
.field .caret{ color: var(--magenta); }
.field .txt{ color: var(--text); min-height: 1.2em; }
.field .txt.idle{ color: var(--dim); }
.field .cursor{ width: 8px; height: 15px; background: var(--magenta); animation: blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  font-family: var(--mono); font-size: 12px;
  color: var(--muted); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 7px 14px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover{ color: var(--text); border-color: var(--line-hi); }
.chip[aria-pressed="true"]{
  color: var(--ink); background: var(--magenta);
  border-color: var(--magenta); font-weight: 600;
}

/* ============ cards de jogo (/play) ============ */
.chips.cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.chips.cards .chip{
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  text-align: left; border-radius: var(--r);
  padding: 13px 14px 14px;
}
.gc-bar{ width: 22px; height: 3px; border-radius: 2px; }
.gc-title{
  font-family: var(--display); font-size: 17px; text-transform: uppercase;
  letter-spacing: .01em; color: var(--text); line-height: 1;
}
.gc-sub{ font-family: var(--mono); font-size: 11px; color: var(--dim); line-height: 1.4; }
.chips.cards .chip[aria-pressed="true"]{
  color: var(--muted); background: var(--ink-1); border-color: var(--cyan); font-weight: 400;
}
.chips.cards .chip[aria-pressed="true"] .gc-title{ color: var(--cyan); }

/* ============ seções ============ */
section{ padding: 84px 0; }
section.tight{ padding: 64px 0; }
section.hero{ padding: 68px 0 0; }

/* Cabeçalho de seção em duas colunas a partir do desktop: o título à esquerda,
   a introdução à direita. Empilhado, o título curto deixava metade da largura
   vazia e a página parecia inacabada. */
.head{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 56px;
  margin-bottom: 44px;
}
.head > .slot{ grid-column: 1 / -1; }
h2{ font-size: clamp(28px, 4.4vw, 52px); }
.head p{ margin: 0; color: var(--muted); font-size: 18px; max-width: 56ch; }

@media (min-width: 980px){
  .head{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
  .head h2{ margin-bottom: 0; }
  .head p{ padding-bottom: 6px; }
}

/* ============ linha do tempo ============ */
.timeline{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (max-width: 880px){ .timeline{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .timeline{ grid-template-columns: 1fr; } }
.tl-item{ background: var(--ink-1); padding: 24px 22px 28px; }
.tl-item .tl-when{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.tl-item h3{ font-size: 22px; margin: 12px 0 8px; }
.tl-item p{ margin: 0; color: var(--muted); font-size: 14.5px; }
.tl-item.now{ box-shadow: inset 0 2px 0 var(--cyan); }
.tl-item.now .tl-when{ color: var(--cyan); }
.tl-item.hot{ box-shadow: inset 0 2px 0 var(--magenta); }
.tl-item.hot .tl-when, .tl-item.hot h3{ color: var(--magenta); }

/* ============ features / passos / targets ============ */
.feats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 46px; }
@media (max-width: 800px){ .feats{ grid-template-columns: 1fr; } }
.feat{ display: flex; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.feat .k{ font-family: var(--mono); font-size: 11px; color: var(--dim); padding-top: 4px; }
.feat h3{ font-size: 21px; margin-bottom: 7px; }
.feat p{ margin: 0; color: var(--muted); font-size: 15.5px; }

.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 800px){ .steps{ grid-template-columns: 1fr; } }
.step{ background: var(--ink-1); padding: 30px 26px 34px; }
.step .n{ font-family: var(--mono); font-size: 12px; color: var(--magenta); letter-spacing: .18em; }
.step h3{ font-size: 26px; margin: 14px 0 10px; }
.step p{ margin: 0; color: var(--muted); font-size: 15.5px; }

.targets{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px){ .targets{ grid-template-columns: 1fr; } }
.target{
  border: 1px solid var(--line); border-top: 3px solid var(--cyan);
  background: var(--ink-1); padding: 24px 22px 26px;
}
.target .t-k{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.target h3{ font-size: 24px; margin: 10px 0 10px; }
.target p{ margin: 0; color: var(--muted); font-size: 15px; }

.disclaimer{
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  margin: 22px 0 0; max-width: 80ch; line-height: 1.7;
}

/* ============ captação ============ */
.signup{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line-hi); border: 1px solid var(--line-hi);
}
@media (max-width: 900px){ .signup{ grid-template-columns: 1fr; } }
.signup-copy{
  padding: clamp(28px, 4vw, 48px);
  background: var(--ink-1);
  border-left: 2px solid var(--magenta);
  display: flex; flex-direction: column; gap: 18px;
}
.signup-copy h2{ font-size: clamp(28px, 3.8vw, 44px); }
.signup-copy p{ margin: 0; color: var(--muted); }
.signup-copy p strong{ color: var(--text); }
.perks{ margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.perks li{ display: flex; gap: 11px; font-size: 15.5px; color: var(--muted); }
.perks li::before{ content: "▸"; color: var(--magenta); flex: none; }

.signup-form{
  padding: clamp(28px, 4vw, 48px); background: var(--ink-1);
  display: flex; flex-direction: column; gap: 18px;
}
.row{ display: flex; flex-direction: column; gap: 7px; }
.row label{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.row label .opt{ letter-spacing: .06em; color: var(--dim); }
.row input, .row select{
  font-family: var(--body); font-size: 16px; color: var(--text);
  background: var(--ink); border: 1px solid var(--line-hi);
  border-radius: var(--r); padding: 12px 13px; width: 100%;
  transition: border-color .15s;
}
.row input::placeholder{ color: var(--dim); }
.row input:hover, .row select:hover{ border-color: #4C3980; }
.row input:focus, .row select:focus{ outline: none; border-color: var(--cyan); }
.row input[aria-invalid="true"]{ border-color: var(--magenta); }
.hp{ display: none; }

.check{ display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--muted); cursor: pointer; }
.check input{ margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--magenta); flex: none; }

.signup-form .cta{ width: 100%; margin-top: 4px; }
.status{ margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; min-height: 1.2em; }
.status.ok{ color: var(--cyan); }
.status.err{ color: var(--amber); }
.fineprint{ margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* ============ páginas de conteúdo ============ */
.pagehead{ padding: 72px 0 44px; border-bottom: 1px solid var(--line); }
.pagehead h1{ font-size: clamp(28px, 7vw, 68px); margin: 16px 0 18px; }
.pagehead p{ margin: 0; color: var(--muted); font-size: 19px; max-width: 62ch; }

.crumbs{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.crumbs a{ color: var(--muted); text-decoration: none; }
.crumbs a:hover{ color: var(--cyan); }
.crumbs span[aria-hidden]{ color: var(--line-hi); }

/* artigo */
.article{ padding: 52px 0 90px; }
.article > * + *{ margin-top: 26px; }
.article p, .article li{ color: var(--muted); font-size: 17.5px; line-height: 1.75; }
.article h2{ font-size: clamp(26px, 3.4vw, 38px); margin-top: 52px; }
.article h3{ font-size: 22px; margin-top: 38px; color: var(--text); }
.article strong{ color: var(--text); font-weight: 600; }
.article a{ color: var(--cyan); text-underline-offset: 3px; }
.article ul, .article ol{ padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.article li::marker{ color: var(--magenta); }
.article hr{ border: 0; border-top: 1px solid var(--line); margin: 46px 0; }
.article blockquote{
  margin: 0; padding: 20px 24px;
  border-left: 3px solid var(--magenta); background: var(--ink-1);
}
.article blockquote p{ margin: 0; color: var(--text); font-size: 18px; }
.article code{
  font-family: var(--mono); font-size: .88em;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 6px; color: var(--cyan);
}
.article pre{
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px; overflow-x: auto;
}
.article pre code{ background: none; border: 0; padding: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

.tablewrap{ overflow-x: auto; border: 1px solid var(--line); }
table{ width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td{ text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
th{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); background: var(--ink-1);
  white-space: nowrap;
}
td{ color: var(--muted); }
tbody tr:last-child td{ border-bottom: 0; }

.meta{
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  letter-spacing: .06em;
}

/* blog index */
.postlist{ display: flex; flex-direction: column; }
.postcard{
  display: grid; grid-template-columns: 150px minmax(0,1fr);
  gap: 26px; padding: 32px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .15s;
}
.postcard:first-child{ border-top: 1px solid var(--line); }
.postcard:hover{ background: rgba(255,46,136,.035); }
.postcard:hover h2{ color: var(--magenta); }
@media (max-width: 700px){ .postcard{ grid-template-columns: 1fr; gap: 10px; } }
.postcard .when{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); padding-top: 6px;
}
.postcard h2{ font-size: clamp(22px, 2.8vw, 30px); transition: color .15s; }
.postcard p{ margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.tags{ display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.tag{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px;
}

/* FAQ */
.faq{ display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  cursor: pointer; list-style: none;
  padding: 24px 44px 24px 0; position: relative;
  font-family: var(--display); font-size: 22px;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--text);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 22px; color: var(--magenta);
}
.faq details[open] summary::after{ content: "–"; }
.faq summary:hover{ color: var(--magenta); }
.faq .answer{ padding: 0 0 26px; }
.faq .answer p{ margin: 0 0 14px; color: var(--muted); font-size: 16.5px; }
.faq .answer p:last-child{ margin-bottom: 0; }

/* CTA de rodapé de página */
.endcta{
  border: 1px solid var(--line);
  border-top: 2px solid var(--magenta);
  background: var(--ink-1);
  padding: clamp(30px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.endcta h2{ font-size: clamp(28px, 3.6vw, 44px); }
.endcta p{ margin: 0; color: var(--muted); max-width: 58ch; }

/* 404 */
.notfound{ padding: 120px 0; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.notfound .code{
  font-family: var(--display); font-size: clamp(80px, 18vw, 190px);
  line-height: .85; color: var(--magenta);
}

/* =============================================================================
   CALCULADORA: tratamento de instrumento, não de landing page.
   Sem brilho, sem gradiente: régua, número alinhado e hierarquia.
   ============================================================================= */

.tool{ padding: 44px 0 96px; }
.tool-grid{
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 0; border: 1px solid var(--line); background: var(--line);
}
@media (max-width: 900px){ .tool-grid{ grid-template-columns: 1fr; } }

.panel{ background: var(--ink-1); padding: 28px 26px 32px; }
.panel + .panel{ border-left: 1px solid var(--line); }
@media (max-width: 900px){ .panel + .panel{ border-left: 0; border-top: 1px solid var(--line); } }

.panel-title{
  font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* campos */
.ctrl{ margin-bottom: 22px; }
.ctrl-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.ctrl-head label{
  font-family: var(--body); font-size: 14px; color: var(--muted);
  letter-spacing: 0; text-transform: none;
}
.ctrl-val{
  font-family: var(--mono); font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ctrl input[type="number"]{
  width: 100%; font-family: var(--mono); font-size: 15px;
  color: var(--text); background: var(--ink);
  border: 1px solid var(--line-hi); border-radius: 3px;
  padding: 10px 12px; font-variant-numeric: tabular-nums;
}
.ctrl input[type="number"]:focus{ outline: none; border-color: var(--cyan); }
.ctrl input[type="range"]{
  width: 100%; margin: 10px 0 0; accent-color: var(--magenta);
  background: transparent;
}
.ctrl select{
  width: 100%; font-family: var(--body); font-size: 15px;
  color: var(--text); background: var(--ink);
  border: 1px solid var(--line-hi); border-radius: 3px; padding: 10px 12px;
}
.ctrl-note{
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  margin: 7px 0 0; line-height: 1.55;
}

/* Grupos que abrem: a página começa com preço e unidades, e só isso.
   Quem quiser mexer nas premissas abre. Quem não quiser, nunca vê. */
.fold{ border-top: 1px solid var(--line); margin-top: 26px; }
.fold > summary{
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 26px 16px 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--muted);
}
.fold > summary::-webkit-details-marker{ display: none; }
.fold > summary::after{
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 18px; color: var(--magenta);
}
.fold[open] > summary::after{ content: "–"; }
.fold > summary:hover{ color: var(--text); }
.fold > summary b{ color: var(--dim); font-weight: 400; display: block; margin-top: 4px; font-size: 11px; }
.fold .foldbody{ padding: 4px 0 10px; }

/* resultado */
.summary{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); margin-bottom: 30px;
  border: 1px solid var(--line);
}
@media (max-width: 620px){ .summary{ grid-template-columns: 1fr; } }
.sum{ background: var(--ink); padding: 18px 18px 20px; }
.sum .k{
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); display: block; margin-bottom: 12px;
}
.sum .v{
  font-family: var(--mono); font-size: 26px; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.sum.net .v{ color: var(--cyan); }
.sum .sub{ font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 8px; }

/* cascata */
.fall{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fall th{
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); background: transparent; text-align: left;
  padding: 0 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fall th.num{ text-align: right; }
.fall td{
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--muted); vertical-align: middle;
}
.fall td.num{
  text-align: right; font-family: var(--mono); font-size: 14.5px;
  white-space: nowrap; padding-left: 16px;
}
.fall tr.sub td{ color: var(--dim); }
.fall tr.sub td.num{ color: #C4708C; }          /* deduções: rosa dessaturado */
/* subtotal: receita depois da Steam, antes do que você gastou */
.fall tr.mid td{
  border-top: 1px solid var(--line-hi);
  padding-top: 15px; color: var(--muted); font-weight: 600;
}
.fall tr.mid td.num{ color: var(--text); }
.fall tr.spacer td{ border: 0; height: 14px; padding: 0; }

.fall tr.total td{
  border-bottom: 0; border-top: 2px solid var(--line-hi);
  padding-top: 18px; color: var(--text); font-weight: 600;
}
.fall tr.total td.num{ color: var(--cyan); font-size: 20px; }
.fall .bar{
  display: block; height: 3px; background: var(--line-hi); margin-top: 7px;
  max-width: 100%;
}
.fall tr.sub .bar{ background: #6E3A52; }
.fall tr.total .bar{ background: var(--cyan); }

.assump{
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.assump h3{
  font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 14px;
}
.assump p{ margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.65; }
.assump p:last-child{ margin-bottom: 0; }

.toolbar{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.btn-line{
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line-hi); border-radius: 3px;
  padding: 9px 16px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-line:hover{ color: var(--text); border-color: var(--cyan); }
.copied{ font-family: var(--mono); font-size: 12px; color: var(--cyan); }

/* =============================================================================
   FOUNDING MEMBER: a página que cobra
   ============================================================================= */

.offer{
  display: grid; grid-template-columns: minmax(0,1fr) 400px;
  gap: 56px; align-items: start; padding: 48px 0 20px;
}
@media (max-width: 940px){ .offer{ grid-template-columns: 1fr; gap: 36px; } }

.offer h2{ font-size: clamp(24px, 3vw, 32px); margin: 40px 0 18px; }
.offer h2:first-of-type{ margin-top: 0; }
.offer p{ color: var(--muted); margin: 0 0 16px; }
.offer p strong{ color: var(--text); }

.getlist{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.getlist li{
  display: grid; grid-template-columns: 22px minmax(0,1fr);
  gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; color: var(--muted);
}
.getlist li:first-child{ border-top: 1px solid var(--line); }
.getlist li b{ color: var(--text); font-weight: 600; }
.getlist .mk{ font-family: var(--mono); font-size: 14px; color: var(--cyan); }
.getlist.no .mk{ color: #C4708C; }

.buybox{
  border: 1px solid var(--line-hi);
  background: var(--ink-1);
  position: sticky; top: 82px;
}
@media (max-width: 940px){ .buybox{ position: static; } }

.buybox-top{ padding: 26px 26px 22px; border-bottom: 1px solid var(--line); }
.buybox .tierlabel{
  font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--magenta); display: block; margin-bottom: 16px;
}
.buybox .price{
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.buybox .price .amt{ font-size: 46px; line-height: 1; color: var(--text); letter-spacing: -.03em; }
.buybox .price .per{ font-size: 13px; color: var(--dim); }
.buybox .once{ font-size: 14px; color: var(--muted); margin: 12px 0 0; }

/* A escada de lotes. Mostrar o que já foi e o que vem é o que torna a
   urgência verificável, em vez de contador regressivo inventado. */
.ladder{ border-bottom: 1px solid var(--line); padding: 18px 26px 20px; }
.ladder-title{
  font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 14px;
}
.ladder ol{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ladder li{
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
}
.ladder li .lp{ font-variant-numeric: tabular-nums; }
.ladder li.gone{ text-decoration: line-through; color: var(--dim); }
.ladder li.open{ color: var(--text); }
.ladder li.open .lp{ color: var(--magenta); font-weight: 600; }
.ladder li.next{ color: var(--dim); }
.ladder .rule{
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  line-height: 1.6;
}

.seats{ padding: 20px 26px; border-bottom: 1px solid var(--line); }
.seats-head{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 10px;
}
.seats-head b{ color: var(--cyan); font-weight: 400; }
.meter{ height: 4px; background: var(--ink); border: 1px solid var(--line); }
.meter i{ display: block; height: 100%; background: var(--magenta); width: 0; }

.buyform{ padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.buyform .cta{ width: 100%; }
.buyform .fineprint{ text-align: center; }
.paylogos{
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  text-align: center; letter-spacing: .04em;
}

.guarantee{
  border: 1px solid var(--line); border-left: 2px solid var(--cyan);
  background: var(--ink-1); padding: 24px 26px; margin: 34px 0 0;
}
.guarantee h3{ font-size: 18px; margin: 0 0 12px; }
.guarantee p{ margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.guarantee p:last-child{ margin-bottom: 0; }

.notice{
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--dim); border: 1px solid var(--line);
  padding: 18px 20px; margin: 34px 0 0;
}
.notice b{ color: var(--muted); font-weight: 400; }

/* estado de sucesso do formulário da lista (indicação) */
.refbox{
  border: 1px solid var(--line-hi); background: var(--ink);
  padding: 18px 20px; margin-top: 4px;
}
.refbox .pos{
  font-family: var(--mono); font-size: 13px; color: var(--cyan);
  margin: 0 0 12px; letter-spacing: .04em;
}
.refbox .pos b{ font-size: 20px; color: var(--text); font-weight: 400; }
.refbox p{ margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.reflink{
  display: flex; gap: 8px; align-items: stretch; margin-top: 12px;
}
.reflink input{
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 3px; padding: 9px 11px;
}

/* =============================================================================
   /play: a demo em página própria
   ============================================================================= */

.playpick{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.playhint{
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  margin: 16px 0 0; display: flex; gap: 22px; flex-wrap: wrap;
}
.playhint b{ color: var(--muted); font-weight: 400; }
.play-wide canvas#screen{ height: min(62vh, 520px); }

/* ============ rodapé ============ */
.sitefoot{ border-top: 1px solid var(--line); padding: 54px 0 60px; }
.footgrid{
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 40px; padding-bottom: 40px;
}
@media (max-width: 760px){ .footgrid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .footgrid{ grid-template-columns: 1fr; } }
.footgrid h4{
  font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 16px;
}
.footgrid nav{ display: flex; flex-direction: column; gap: 10px; }
.footgrid nav a{ color: var(--muted); text-decoration: none; font-size: 15px; }
.footgrid nav a:hover{ color: var(--cyan); }
.footblurb{ color: var(--muted); font-size: 15px; margin: 0; max-width: 40ch; }
.footblurb strong{ color: var(--text); }
.footbase{
  border-top: 1px solid var(--line); padding-top: 24px;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* =============================================================================
   ENTRADA E REVELAÇÃO

   Uma sequência só, orquestrada: a página chega encenada em vez de aparecer
   de uma vez. Não é enfeite espalhado, é o oposto disso.

   A classe .motion é posta no <html> por um script inline no <head>, e só
   quando o sistema não pede movimento reduzido. Sem JavaScript, ou com
   movimento reduzido, nada disso liga e o conteúdo aparece normal.
   ============================================================================= */

/* Curva de desaceleração forte: sai rápido, chega devagar. É o que separa
   movimento desenhado de transição padrão de navegador. */
:root{ --ease-out: cubic-bezier(.16, 1, .3, 1); }

.motion .reveal{
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.motion .reveal.in{
  opacity: 1;
  transform: none;
  transition:
    opacity   .5s var(--ease-out),
    transform .5s var(--ease-out);
}

/* Peso diferente para papéis diferentes. Texto chega leve e rápido; o painel
   da demo é o objeto pesado da página, então vem de mais longe e mais devagar.
   Tudo com a mesma duração seria movimento de template. */
.motion .reveal.heavy{ transform: translateY(26px); }
.motion .reveal.heavy.in{ transition-duration: .74s; }

.motion .reveal.light{ transform: translateY(8px); }
.motion .reveal.light.in{ transition-duration: .42s; }

/* A barra do topo abre a sequência.
   Animação pura de CSS, de propósito: se o motion.js não carregar, ela ainda
   desce sozinha. Depender de JS aqui esconderia a navegação do site inteiro. */
.motion .marquee{ animation: bar-in .52s var(--ease-out) both; }
@keyframes bar-in{
  from{ transform: translateY(-100%); }
  to  { transform: none; }
}

/* =============================================================================
   PAINEL

   Cor de dado: #1E9EC4. Não foi escolhida a olho. O ciano da marca (#3FE0FF)
   reprovou na banda de luminosidade para marca em fundo escuro (L 0.84, banda
   é 0.48–0.67). Este degrau passou nos cinco testes contra a superfície
   #100B1D: banda, croma, separação para daltonismo (ΔE 12.3 deutan),
   piso de visão normal (33.9) e contraste (≥3:1).

   O magenta fica reservado para AÇÃO e para o lote aberto. Nunca vira
   "série 2", senão deixa de significar "aqui é onde você clica".
   ============================================================================= */

:root{ --viz: #1E9EC4; }

.gate{ max-width: 460px; margin: 90px auto; }
.gate p{ color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.gate .warn{
  font-family: var(--mono); font-size: 12px; color: var(--amber);
  border: 1px solid rgba(255,182,41,.35); padding: 14px 16px; margin: 18px 0 0; line-height: 1.6;
}

/* Colunas fixas, não auto-fit: com 6 placas o auto-fit encaixava 5 e deixava
   uma célula órfã enorme na segunda linha. Grade que divide certo. */
.kpis{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 34px;
}
@media (max-width: 760px){ .kpis{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .kpis{ grid-template-columns: 1fr; } }
.kpi{ background: var(--ink-1); padding: 20px 22px 22px; }
.kpi .k{
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); display: block; margin-bottom: 14px;
}
.kpi .v{
  font-family: var(--mono); font-size: 30px; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kpi .s{ font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 9px; }
.kpi.hot .v{ color: var(--magenta); }

.panels{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px; }
@media (max-width: 900px){ .panels{ grid-template-columns: 1fr; } }

.board{ border: 1px solid var(--line); background: var(--ink-1); padding: 22px 24px 26px; }
.board h3{
  font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 6px;
}
.board .sub{ font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin: 0 0 20px; }
.board .empty{ font-family: var(--mono); font-size: 12.5px; color: var(--dim); padding: 14px 0; }

/* barras horizontais, série única.
   Ponta arredondada de 4px na extremidade do dado, ancorada na linha de base. */
.bars{ display: flex; flex-direction: column; gap: 12px; }
.bar-row{ display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
.bar-lab{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.bar-lab b{ font-family: var(--mono); color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }
.bar-track{ height: 10px; background: var(--ink); border-radius: 2px; overflow: hidden; }
.bar-fill{
  height: 100%; background: var(--viz);
  border-radius: 2px 4px 4px 2px;
  min-width: 2px;
  transition: width .4s var(--ease-out);
}
.bar-row.zero .bar-fill{ background: var(--line-hi); }

/* escada de lotes: estado, não série. Cada linha carrega rótulo de texto,
   então a identidade nunca depende só da cor. */
.blad{ display: flex; flex-direction: column; gap: 14px; }
.blad-row .bar-lab b{ color: var(--muted); }
.blad-row.open .bar-fill{ background: var(--magenta); }
.blad-row.open .bar-lab b{ color: var(--magenta); }
.blad-row.gone .bar-fill{ background: var(--dim); }
.blad-row.next .bar-track{ border: 1px dashed var(--line-hi); background: transparent; height: 10px; }
.blad-tag{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px;
}
.blad-row.open .blad-tag{ color: var(--magenta); border-color: rgba(255,46,136,.4); }

.board table{ font-size: 13.5px; }
.board th{ background: transparent; padding: 0 12px 9px 0; }
.board td{ padding: 10px 12px 10px 0; }
.board td:last-child, .board th:last-child{ padding-right: 0; text-align: right; }
.board .who{ color: var(--text); }
.board .mail{ font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* ============ placar dos minijogos ============ */
.leaderboard{ max-width: 420px; margin: 28px auto 0; }
.leaderboard h3 span{ color: var(--cyan); text-transform: lowercase; }
.lb-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-list li{
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lb-list li:last-child{ border-bottom: 0; }
.lb-list li:nth-child(1) .lb-rank{ color: var(--amber); }
.lb-rank{ font-family: var(--mono); font-size: 12px; color: var(--dim); }
.lb-name{ color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score{ font-family: var(--mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.lb-list li.lb-empty{ display: block; font-family: var(--mono); font-size: 12.5px; color: var(--dim); padding: 10px 4px; }
.pill{
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; color: var(--dim);
  white-space: nowrap;
}
.pill.founding{ color: var(--magenta); border-color: rgba(255,46,136,.4); }
.pill.agency{ color: var(--viz); border-color: rgba(30,158,196,.45); }

.actions{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.out{
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--ink); border: 1px solid var(--line); padding: 14px 16px;
  margin-top: 16px; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow: auto; line-height: 1.6;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal, .marquee{ opacity: 1 !important; transform: none !important; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}