/* ProgViewer — landing page.
   Os tokens saem de app/styles.css: a página e o produto usam a mesma paleta, a mesma
   tipografia e o mesmo azul de marca. Tema claro e escuro por prefers-color-scheme, como
   o app faz — uma página que fala de "segue o seu sistema" precisa segui-lo também. */

@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-latin.c940764593.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin.a0d054c4af.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/fonts/jetbrains-mono-latin.1e06740a02.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  --bg:#05070d; --surface:#0b101c; --card:#0f1626; --card-2:#131b2f;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13);
  --txt:#eef1f6; --txt-2:#9aa5b8; --txt-mut:#6e7992;
  --brand:#79c0ff; --green:#10b981;
  --shadow:0 40px 80px -32px rgba(0,0,0,.85), 0 8px 24px -12px rgba(0,0,0,.6);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk',var(--font-sans);
  --font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --pad:clamp(1.25rem,5vw,3rem);
  --gap-sec:clamp(6rem,14vw,11rem);
  --max:78rem;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7f9; --surface:#ffffff; --card:#ffffff; --card-2:#f0f2f5;
    --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.15);
    --txt:#0f1626; --txt-2:#3b4557; --txt-mut:#667288;
    --brand:#3a72cf; --green:#059669;
    --shadow:0 40px 80px -32px rgba(15,22,38,.28), 0 8px 24px -12px rgba(15,22,38,.16);
  }
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:450;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

/* ---------- cabeçalho ---------- */

.bar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.bar__in{
  max-width:var(--max); margin:0 auto; padding:.75rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--txt);
  font-family:var(--font-display); font-size:1.0625rem; font-weight:500;
  letter-spacing:-.01em;
}
.brand svg{color:var(--txt); flex:none}
.brand b{color:var(--brand); font-weight:700}
.lang{
  text-decoration:none; color:var(--txt-2);
  font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  padding:.4rem .7rem; border:1px solid var(--line-strong); border-radius:999px;
  transition:color .2s, border-color .2s;
}
.lang:hover{color:var(--txt); border-color:var(--txt-mut)}

/* ---------- blocos ---------- */

.hero{
  max-width:var(--max); margin:0 auto;
  padding:clamp(4rem,12vw,8.5rem) var(--pad) 0;
  text-align:center;
}
h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,7.5vw,5.25rem);
  line-height:1.02; font-weight:700; letter-spacing:-.035em;
  text-wrap:balance;
}
.lead{
  margin:clamp(1.25rem,3vw,1.75rem) auto 0;
  max-width:36rem;
  font-size:clamp(1.0625rem,2.2vw,1.375rem);
  color:var(--txt-2); text-wrap:balance;
}

.sec{
  max-width:var(--max); margin:0 auto;
  padding:var(--gap-sec) var(--pad) 0;
}
.sec__head{max-width:44rem; margin:0 auto; text-align:center}
.sec__head h2, .offline h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4.6vw,3.15rem);
  line-height:1.08; font-weight:700; letter-spacing:-.03em;
  text-wrap:balance;
}
.sec__head p, .offline p{
  margin-top:1.1rem; color:var(--txt-2);
  font-size:clamp(1rem,1.6vw,1.1875rem);
}
.sec__note{
  max-width:40rem; margin:2.25rem auto 0; text-align:center;
  color:var(--txt-2); font-size:clamp(1rem,1.6vw,1.125rem);
}

/* Faixa de fundo: dá ritmo à sequência de seções, que de outro modo é um bloco só de cor
   uniforme do topo ao rodapé. A seção continua com a mesma largura máxima por dentro. */
.band{
  background:var(--surface);
  border-block:1px solid var(--line);
  margin-top:var(--gap-sec);
}
.band .sec{padding-top:var(--gap-sec)}
.band > .sec:last-child{padding-bottom:var(--gap-sec)}

/* ---------- captura de tela ---------- */

.shot{
  margin:clamp(2.5rem,6vw,4.5rem) auto 0;
  max-width:72.5rem;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  background:var(--card);
}
.shot img{width:100%}
.shot--hero{margin-top:clamp(3rem,7vw,5rem)}

/* ---------- selo e links de continuação ---------- */

.hero__meta{
  margin-top:clamp(1.5rem,3.5vw,2.25rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 1.5rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:600; color:var(--txt);
  padding:.45rem .95rem; border:1px solid var(--line-strong); border-radius:999px;
  background:var(--card);
}
.pill::before{
  content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--green); flex:none;
}
.more{
  color:var(--brand); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.more:hover{border-bottom-color:currentColor}
.more--sm{display:inline-block; margin:.6rem 0 0 1rem; font-size:.9375rem}

.duo{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:1fr;
}
.duo .shot{margin-top:0; max-width:none}
@media (min-width:56rem){ .duo{grid-template-columns:1fr 1fr} }

/* ---------- alternador de tema ---------- */

.switch{
  margin:clamp(2rem,4vw,2.75rem) auto 0;
  display:inline-flex; gap:.25rem; padding:.25rem;
  border:1px solid var(--line-strong); border-radius:999px; background:var(--card);
}
.sec--theme{text-align:center}
.sec--theme .shot{text-align:initial}
.switch__btn{
  appearance:none; border:0; cursor:pointer; background:transparent; color:var(--txt-2);
  font:inherit; font-size:.9375rem; font-weight:500;
  padding:.5rem 1.15rem; border-radius:999px;
  transition:background .2s, color .2s;
}
.switch__btn:hover{color:var(--txt)}
.switch__btn[aria-pressed="true"]{background:var(--card-2); color:var(--txt)}

/* ---------- lista de recursos ---------- */

.craft{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:1fr;
}
@media (min-width:44rem){ .craft{grid-template-columns:1fr 1fr} }
.craft h3{
  font-family:var(--font-display); font-size:1.1875rem; font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.6rem;
}
.craft h3::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--green); flex:none;
}
.craft p{margin-top:.5rem; color:var(--txt-2); padding-left:1rem}

/* ---------- números e linguagens ---------- */

.nums{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:1fr; text-align:center;
}
@media (min-width:44rem){ .nums{grid-template-columns:1fr 1fr} }
.num__n{
  display:block; font-family:var(--font-display);
  font-size:clamp(3.5rem,9vw,6rem); font-weight:700; letter-spacing:-.045em; line-height:1;
  color:var(--brand);
}
.num__l{
  display:block; margin:.85rem auto 0; max-width:20rem;
  color:var(--txt-2); font-size:1rem;
}

.langs{
  list-style:none; margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:56rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem;
}
.langs li{
  font-family:var(--font-mono); font-size:.8125rem; color:var(--txt-mut);
  border:1px solid var(--line); border-radius:7px; padding:.25rem .55rem;
  background:var(--card);
}

/* ---------- offline ---------- */

.offline{max-width:46rem; margin:0 auto; text-align:center}

/* ---------- plataformas ---------- */

.plats{
  list-style:none; margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:44rem;
  border-top:1px solid var(--line);
}
.plats li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.05rem .25rem; border-bottom:1px solid var(--line);
}
.plats__name{font-family:var(--font-display); font-size:1.125rem; font-weight:500}
.plats__status{font-size:.8125rem; color:var(--txt-mut); letter-spacing:.02em}
.plats li[data-status="soon"] .plats__status{color:var(--green)}

/* ---------- página de recursos ---------- */

.hero--sub h1{font-size:clamp(2.2rem,6vw,4rem)}

.toc{
  max-width:46rem; margin:clamp(3rem,7vw,4.5rem) auto 0; padding:0 var(--pad);
}
.toc__title{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-mut);
}
.toc ol{
  list-style:none; margin-top:.9rem;
  display:grid; gap:.1rem 1.5rem; grid-template-columns:1fr;
  border-top:1px solid var(--line); padding-top:.9rem;
}
@media (min-width:40rem){ .toc ol{grid-template-columns:1fr 1fr} }
.toc a{
  display:block; padding:.3rem 0; color:var(--txt-2); text-decoration:none;
}
.toc a:hover{color:var(--brand)}

.doc{max-width:46rem; margin:0 auto; padding:0 var(--pad)}
.doc__sec{padding-top:clamp(3.5rem,8vw,5rem); scroll-margin-top:3.5rem}
.doc h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.6vw,2.25rem);
  line-height:1.12; font-weight:700; letter-spacing:-.025em;
  padding-bottom:.9rem; border-bottom:1px solid var(--line);
}
.doc h3{
  font-family:var(--font-display); font-size:1.1875rem; font-weight:600; letter-spacing:-.01em;
  margin-top:2rem;
}
.doc p, .doc ul, .doc ol, .doc table, .doc blockquote{margin-top:1rem}
.doc p, .doc li{color:var(--txt-2)}
.doc strong{color:var(--txt); font-weight:600}
.doc ul, .doc ol{padding-left:1.25rem}
.doc li + li{margin-top:.35rem}
.doc li::marker{color:var(--txt-mut)}
.doc code{
  font-family:var(--font-mono); font-size:.85em;
  background:var(--card-2); border:1px solid var(--line); border-radius:5px;
  padding:.05em .35em; white-space:nowrap;
}
.doc blockquote{
  border-left:3px solid var(--brand); padding:.25rem 0 .25rem 1rem;
}
.doc blockquote p{margin-top:0}
.doc hr{display:none}
.doc .shot{margin:1.75rem 0 0; max-width:none}
.doc table{
  width:100%; border-collapse:collapse; font-size:.9375rem;
  display:block; overflow-x:auto;
}
.doc th, .doc td{
  text-align:left; vertical-align:top;
  padding:.6rem .9rem .6rem 0; border-bottom:1px solid var(--line);
}
.doc th{color:var(--txt); font-weight:600; border-bottom-color:var(--line-strong)}
.doc td{color:var(--txt-2)}
.doc__back{max-width:46rem; margin:clamp(3.5rem,8vw,5rem) auto 0; padding:0 var(--pad)}

/* ---------- rodapé ---------- */

.foot{
  margin-top:var(--gap-sec);
  border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) var(--pad);
}
.foot__in{max-width:var(--max); margin:0 auto; text-align:center; color:var(--txt-2); font-size:.9375rem}

/* ---------- entrada ---------- */

/* O estado oculto vive em .armed, aplicada pelo próprio script — sem JS, ou com ele
   quebrado, o conteúdo aparece normalmente em vez de a página ficar em branco. */
.reveal.armed{opacity:0; transform:translateY(12px)}
.reveal{transition:opacity .7s ease, transform .7s ease}
.reveal.armed.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .reveal.armed{opacity:1; transform:none; transition:none}
  *{animation:none !important}
}