/* Skills da Nina Verso — Afreektech
   Key visual do Afreektech: lima #c8d44a sobre azure profundo, Changa no display
   e Archivo no corpo. A arquitetura da pagina (eyebrow 11px/0.2em, display com
   letter-spacing negativo, mono nos blocos de codigo, anatomia do cartao) segue
   a referencia; a pintura e do Afreektech. */

:root{
  /* key visual */
  --lime:#c8d44a;
  --lime-ink:#02131f;
  --cream:#d5d5be;
  --azure-900:#02131f;
  --azure-700:#122233;
  --azure-500:#3a5263;
  --azure-300:#8baab8;
  --black:#000;
  --grey-97:#0d0d0d;
  --grey-98:#060606;
  --white:#fff;

  /* papeis */
  --papel:var(--grey-98);
  --papel-2:var(--grey-97);
  --cartao:var(--azure-700);
  --borda:rgba(200,212,74,.18);
  --borda-fria:rgba(139,170,184,.16);
  --suave:var(--azure-300);

  --raio:8px;
  --medida:68ch;
  --larg:1128px;
  --gutter:clamp(20px,5vw,40px);
  --display:"Changa","Archivo",system-ui,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--papel);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--larg);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--lime);margin:0 0 18px;
}
.display{
  font-family:var(--display);
  font-size:clamp(36px,6.6vw,58px);font-weight:700;
  letter-spacing:-.03em;line-height:.98;margin:0;color:var(--white);
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--lime)}
h2.titulo{
  font-family:var(--display);
  font-size:clamp(26px,3.6vw,38px);font-weight:700;
  letter-spacing:-.02em;line-height:1.06;margin:0 0 14px;color:var(--white);text-wrap:balance;
}
h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;
  line-height:1.2;margin:0;color:var(--white)}
.lead{font-size:clamp(15px,1.7vw,17px);line-height:1.65;color:var(--suave);max-width:var(--medida);margin:0}
.mono{font-family:var(--mono);font-size:13px;color:var(--lime)}

/* ---------- topo ---------- */
.topo{
  background:rgba(6,6,6,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda-fria);position:sticky;top:0;z-index:20;
}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.marca{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--white);
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
/* O SVG oficial e 117x15. height fixa + width auto trava a proporcao: o logo
   nunca distorce, mesmo se a caixa apertar. */
.marca img{height:15px;width:auto;display:block;flex:none}
.marca span{color:var(--lime);font-weight:400}
.marca .marca__produto{color:var(--cream);font-weight:600}
@media (max-width:420px){
  .marca img{height:13px}
  .marca .marca__produto{display:none}  /* em tela estreita fica so o logo */
}
.topo__link{color:var(--suave);font-size:12.5px;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.topo__link:hover{color:var(--lime)}

/* ---------- hero, com o glow borrado do key visual ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--black);color:var(--cream);
  padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,92px);
}
/* O brilho e aditivo (screen), para clarear sem sujar o preto. O blur pesado e o
   que da a textura do key visual — sem ele o gradiente fica com cara de banner. */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto auto;
  width:min(760px,90vw);height:min(760px,90vw);
  background:
    radial-gradient(closest-side,rgba(200,212,74,.42),rgba(200,212,74,.10) 55%,transparent 78%),
    radial-gradient(closest-side at 60% 70%,rgba(58,82,99,.55),transparent 70%);
  filter:blur(72px);mix-blend-mode:screen;pointer-events:none;z-index:-1;
}
.hero::after{
  content:"";position:absolute;left:-14%;bottom:-38%;
  width:min(560px,80vw);height:min(560px,80vw);
  background:radial-gradient(closest-side,rgba(18,34,51,.9),transparent 72%);
  filter:blur(64px);pointer-events:none;z-index:-1;
}
.hero .lead{margin-top:24px;color:var(--cream);opacity:.86}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:26px;
  border-top:1px solid var(--borda-fria)}
.chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--cream);background:rgba(18,34,51,.55);backdrop-filter:blur(6px);
  border:1px solid var(--borda-fria);border-radius:999px;padding:6px 13px;
}
.chip b{color:var(--lime);font-weight:400}

/* ---------- secoes ---------- */
.secao{padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--borda-fria);position:relative}
.secao--alt{background:var(--papel-2)}
.secao--escura{background:var(--azure-900);position:relative;isolation:isolate;overflow:hidden}
/* Mesmo brilho do hero, mais discreto, para amarrar a dobra 2 ao key visual. */
.secao--escura::before{
  content:"";position:absolute;right:-8%;top:-16%;
  width:min(620px,80vw);height:min(620px,80vw);
  background:radial-gradient(closest-side,rgba(200,212,74,.20),transparent 72%);
  filter:blur(80px);mix-blend-mode:screen;pointer-events:none;z-index:-1;
}
.secao__cabeca{max-width:var(--medida);margin-bottom:clamp(28px,4vw,44px)}
.conta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azure-500);margin:0 0 10px}

/* ---------- cartoes ---------- */
.grade{display:grid;gap:16px}
@media (min-width:760px){.grade--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grade--3{grid-template-columns:repeat(3,1fr)}}

.cartao{
  background:var(--cartao);border:1px solid var(--borda-fria);border-radius:var(--raio);
  padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:border-color .18s ease,transform .18s ease;
}
.cartao:hover{border-color:var(--borda);transform:translateY(-2px)}
.cartao__topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.num{font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.08em}
.selo{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azure-300);border:1px solid var(--borda-fria);border-radius:3px;padding:2px 7px;
}
.cartao__promessa{margin:0;font-size:14.5px;line-height:1.55;color:var(--azure-300)}
.entrega{
  margin:0;padding-top:12px;border-top:1px solid var(--borda-fria);
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--cream);
  word-break:break-word;
}
.entrega b{display:block;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:5px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 18px;border-radius:var(--raio);
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn--primario{background:var(--lime);color:var(--lime-ink)}
.btn--primario:hover{background:#d6e25c}
.btn--fantasma{background:transparent;border-color:var(--borda-fria);color:var(--cream)}
.btn--fantasma:hover{border-color:var(--lime);color:var(--lime)}
.btn--bloco{width:100%}
/* azure-500 sobre o cartao dava 2.0:1 - ilegivel. azure-300 da 6.6:1. */
.btn[disabled]{cursor:not-allowed;color:var(--azure-300);border-style:dashed;
  border-color:var(--borda-fria)}
.btn[disabled]:hover{border-color:var(--borda-fria);color:var(--azure-300)}

/* ---------- abas de instalacao ---------- */
.abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.aba{
  font-family:var(--sans);font-size:13px;font-weight:700;padding:11px 16px;min-height:44px;
  border:1px solid var(--borda-fria);background:transparent;color:var(--suave);
  border-radius:var(--raio);cursor:pointer;
}
.aba:hover{color:var(--cream)}
.aba[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.painel[hidden]{display:none}
.painel ol{margin:0;padding-left:20px}
.painel li{margin-bottom:9px;font-size:14.5px;line-height:1.6;color:var(--cream)}
.painel li::marker{color:var(--lime);font-family:var(--mono);font-size:12px}
.painel b{color:var(--white)}

.codigo{
  font-family:var(--mono);font-size:12.5px;line-height:1.7;
  background:var(--black);color:var(--lime);
  border:1px solid var(--borda-fria);
  border-radius:var(--raio);padding:14px 16px;margin:10px 0;
  overflow-x:auto;white-space:pre;
}

/* ---------- trava ---------- */
.trava{
  background:rgba(18,34,51,.72);backdrop-filter:blur(18px);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:clamp(22px,4vw,34px);max-width:560px;position:relative;
}
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.campo label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime)}
.campo input{
  font-family:var(--mono);font-size:16px;
  padding:13px 14px;min-height:48px;border-radius:var(--raio);
  border:1px solid var(--borda-fria);background:rgba(0,0,0,.45);color:var(--white);
}
/* Caixa alta e espacamento largo servem para codigo de acesso, nunca para
   e-mail: o endereco da pessoa apareceria gritado e com cara de erro. */
.campo input[type="text"]{letter-spacing:.14em;text-transform:uppercase}
.campo input[type="email"]{letter-spacing:0;text-transform:none}
.campo input::placeholder{color:var(--azure-500)}
.campo input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.aviso{margin:12px 0 0;font-size:13.5px;line-height:1.5;min-height:20px}
.aviso--erro{color:#f0a48f}
.aviso--ok{color:var(--lime)}
.dica{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--azure-500)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--borda-fria)}
.faq details:first-of-type{border-top:1px solid var(--borda-fria)}
.faq summary{
  cursor:pointer;padding:18px 0;font-family:var(--display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;color:var(--white);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--lime);font-size:19px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--suave);max-width:var(--medida);font-size:14.5px}

/* ---------- rodape ---------- */
.rodape{background:var(--black);color:var(--azure-500);padding:40px 0;font-size:13px;
  border-top:1px solid var(--borda-fria)}
.rodape a{color:var(--suave);text-decoration:none}
.rodape a:hover{color:var(--lime)}
.rodape__linha{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}

/* ---------- utilidades ---------- */
.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:12px;z-index:99;background:var(--lime);color:var(--lime-ink);
  padding:12px 16px;border-radius:var(--raio);position:fixed;font-weight:700}

/* ---------- porta (tela de entrada) ---------- */
.porta{
  position:relative;isolation:isolate;overflow:hidden;background:var(--black);
  min-height:calc(100vh - 56px);display:flex;align-items:center;
  padding:clamp(48px,8vw,96px) 0;
}
.porta::before{
  content:"";position:absolute;inset:-25% -15% auto auto;
  width:min(820px,95vw);height:min(820px,95vw);
  background:
    radial-gradient(closest-side,rgba(200,212,74,.40),rgba(200,212,74,.10) 55%,transparent 78%),
    radial-gradient(closest-side at 60% 70%,rgba(58,82,99,.52),transparent 70%);
  filter:blur(78px);mix-blend-mode:screen;pointer-events:none;z-index:-1;
}
.porta::after{
  content:"";position:absolute;left:-16%;bottom:-42%;
  width:min(600px,85vw);height:min(600px,85vw);
  background:radial-gradient(closest-side,rgba(18,34,51,.9),transparent 72%);
  filter:blur(66px);pointer-events:none;z-index:-1;
}
.porta__in{max-width:720px}
.porta .lead{margin:24px 0 32px;color:var(--cream);opacity:.86}
.porta .trava{max-width:460px}
.porta .chips{margin-top:32px}

/* estado no topo, depois de entrar */
.topo__estado{display:flex;align-items:center;gap:12px}
.topo__badge{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);border:1px solid var(--borda);border-radius:999px;padding:4px 11px;
}
.topo__sair{
  background:none;border:0;color:var(--suave);font-family:var(--sans);font-size:12.5px;
  cursor:pointer;padding:8px 4px;min-height:44px;
}
.topo__sair:hover{color:var(--lime);text-decoration:underline}

/* segunda trava, dentro da sala */
.trava--secundaria{margin-top:clamp(24px,4vw,36px)}

/* ---------- estado "link enviado" ---------- */
.trava--enviado{text-align:left}
.enviado__marca{
  margin:0 0 10px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--lime-ink);font-size:20px;font-weight:700;
}
.enviado__titulo{
  font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);margin:0;
}
.trava--enviado .lead{font-size:15px}
.topo__email{
  font-family:var(--mono);font-size:11.5px;color:var(--azure-300);
  max-width:min(200px,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:560px){ .topo__email{display:none} }