/* AnyPane — landing. Estatico: sem build, sem framework, sem rede.
   Tokens de cor extraidos de assets/anypane_logo_vector.svg (gGreen/gOrange). */

@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("./fonts/titillium-web-400.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;
  src:url("./fonts/titillium-web-600.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;
  src:url("./fonts/titillium-web-700.woff2") format("woff2")}

:root{
  /* Marca — hex do proprio SVG da logo. */
  --green-hi:#DFFF00; --green:#B7FF00; --green-deep:#79E600;
  --orange-hi:#FFB000; --orange:#FF7B00; --orange-deep:#FF5A00;

  /* A logo assenta sobre preto puro; a pagina usa o mesmo chao. */
  --ink:#000; --pane:#0A0B0C; --pane-2:#0E1012;
  --line:#1C1F23; --line-2:#2A2F36;
  --fg:#E9E9E9; --fg-dim:#9AA0A8; --fg-faint:#7C828A;

  --w:1120px; --gut:clamp(20px,5vw,56px);
  --step:clamp(1rem,.85rem + .6vw,1.15rem);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font:400 var(--step)/1.6 "Titillium Web","Segoe UI",system-ui,sans-serif;
  /* Grade de painel: literal ao produto, quase invisivel. Sem glow. */
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.028) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 72px);
}
::selection{background:var(--green);color:#000}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
a{color:var(--green);text-underline-offset:3px}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}

/* ---------- tipografia ---------- */
h1,h2,h3{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,1.3rem + 4.2vw,4.5rem)}
h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem)}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);letter-spacing:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:var(--fg-dim);max-width:60ch;line-height:1.55}
.dim{color:var(--fg-dim)}
.faint{color:var(--fg-faint);font-size:.86rem;line-height:1.5}
.num{font-variant-numeric:tabular-nums}
code,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---------- estrutura de secao ---------- */
section{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,104px)}
.eyebrow{
  display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(24px,4vw,40px);
  font:600 .78rem/1 "Titillium Web",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.18em;color:var(--fg-faint);
}
.eyebrow b{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}

/* Painel: o motivo do produto e da logo — retangulo com colchete no canto. */
.pane{position:relative;background:var(--pane);border:1px solid var(--line);padding:clamp(20px,3vw,30px)}
.pane::before{
  content:"";position:absolute;top:-1px;left:-1px;width:16px;height:16px;
  border-top:2px solid var(--green);border-left:2px solid var(--green);
}
.pane.alt::before{border-color:var(--orange)}

.grid{display:grid;gap:clamp(14px,2vw,20px)}
.grid>*{min-width:0}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3,.g2{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{border-top:0;padding-block:clamp(32px,6vw,64px) clamp(56px,8vw,104px)}
.hero img{display:block;width:min(430px,74vw);height:auto;margin:0 0 clamp(34px,6vw,58px)}
.hero h1{max-width:16ch;margin-bottom:.42em}
.hero .lede{margin-bottom:clamp(30px,4vw,40px)}

/* Negacoes: brancas e secas. Cor aqui viraria alarme, e nao ha alarme nenhum. */
.denials{display:flex;flex-wrap:wrap;gap:0;margin:clamp(34px,5vw,52px) 0 0;border-top:1px solid var(--line-2)}
.denials span{
  flex:1 1 200px;padding:18px 20px 18px 0;font-weight:700;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);letter-spacing:-.01em;
}
.denials span + span{padding-left:20px;border-left:1px solid var(--line)}
@media(max-width:660px){
  .denials span,.denials span + span{flex-basis:100%;padding:14px 0;border-left:0;border-top:1px solid var(--line)}
  .denials span:first-child{border-top:0}
}

/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;gap:12px;
  background:var(--green);color:#000;text-decoration:none;
  font:700 1.02rem/1 "Titillium Web",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.1em;padding:19px 32px;border:0;
  transition:background .12s linear}
.cta:hover{background:var(--green-hi)}
.cta[aria-disabled="true"]{background:var(--line-2);color:var(--fg-faint);cursor:not-allowed}
.cta-note{margin-top:14px;color:var(--fg-faint);font-size:.86rem}

/* ---------- numeros ---------- */
.stat{display:block;font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);font-variant-numeric:tabular-nums;color:var(--green)}
.stat.warn{color:var(--orange)}
.stat-l{display:block;margin-top:10px;color:var(--fg-dim);font-size:.94rem;line-height:1.45}

/* ---------- area do print ---------- */
.shot{border:1px dashed var(--line-2);background:var(--pane-2);aspect-ratio:16/10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}
.shot .mono{color:var(--orange);font-size:.9rem;letter-spacing:.06em}

/* ---------- grafico ---------- */
.chart{margin-top:clamp(24px,4vw,36px)}
.chart svg{display:block;width:100%;height:auto}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--fg-faint);font:400 13px/1 "Titillium Web",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.chart .tag{font-weight:700;font-size:15px}
.chart .tag.g{fill:var(--green)}
.chart .tag.o{fill:var(--orange)}
.line{fill:none;stroke-width:3;stroke-linecap:square}
.line.g{stroke:var(--green)}
.line.o{stroke:var(--orange)}
/* Unico movimento da pagina: as duas linhas se desenham uma vez. */
.chart[data-draw] .line{stroke-dasharray:780;stroke-dashoffset:780}
.chart[data-draw].on .line{animation:draw 1.15s cubic-bezier(.25,.8,.35,1) forwards}
.chart[data-draw].on .line.o{animation-delay:.16s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- verificacao / hash ---------- */
.verify{background:var(--pane-2);border:1px solid var(--line);padding:clamp(20px,3vw,30px)}
.hash{display:block;margin:16px 0 0;padding:16px 18px;background:#000;border:1px solid var(--line-2);
  color:var(--green);font-size:.9rem;word-break:break-all;line-height:1.55}
.shell{display:block;margin:12px 0 0;padding:16px 18px;background:#000;border:1px solid var(--line-2);
  color:var(--fg-dim);font-size:.88rem;max-width:100%;overflow-x:auto;white-space:pre}

/* Marcador do que nao existe ainda. Impossivel de subir sem ver. */
.pend{display:inline-block;padding:1px 8px;border:1px dashed var(--orange);
  color:var(--orange);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.82em;letter-spacing:.04em;white-space:nowrap}

.req{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--fg-dim);font-size:.94rem}
.req b{color:var(--fg);font-weight:600}

ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{position:relative;padding:0 0 0 20px;margin-bottom:.55em;color:var(--fg-dim)}
ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--fg-faint)}
ul.plain li:last-child{margin-bottom:0}

footer{border-top:1px solid var(--line);padding-block:44px 64px;color:var(--fg-faint);font-size:.86rem}
footer img{display:block;width:170px;height:auto;margin-bottom:20px;opacity:.85}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .chart[data-draw] .line{stroke-dashoffset:0}
}

/* ---------- utilitarios de espaco (sem style inline: a CSP fica estrita) ---------- */
.mt-xs{margin-top:.5em}
.mt-s{margin-top:.7em}
.mt-1{margin-top:1em}
.mt-2{margin-top:1.4em}
.mt-t{margin-top:14px}
.mt-p{margin-top:26px}
.mt-n{margin-top:clamp(8px,2vw,16px)}
.mt-m{margin-top:clamp(20px,3vw,28px)}
.mt-b{margin-top:clamp(24px,4vw,36px)}
.top{align-items:start}

/* ---------- linha de beneficios do hero ---------- */
.perks{display:flex;flex-wrap:wrap;gap:0;margin:clamp(34px,5vw,52px) 0 0;border-top:1px solid var(--line-2)}
.perks>div{flex:1 1 220px;padding:20px 22px 0 0}
.perks>div + div{padding-left:22px;border-left:1px solid var(--line)}
.perks b{display:block;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.35em}
.perks span{display:block;color:var(--fg-dim);font-size:.94rem;line-height:1.5}
@media(max-width:760px){
  .perks>div,.perks>div + div{flex-basis:100%;padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .perks>div:first-child{border-top:0}
}