:root{
  --bg: #15181b;
  --panel: #1d2125;
  --panel-2: #23282d;
  --line: #32383e;
  --text: #ece9e2;
  --muted: #8b9097;
  --orange: #ff6a35;
  --teal: #3fbac2;
  --green: #7cc576;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.01em;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:var(--orange);}

.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px;}

header.top{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  position:sticky;top:0;
  background:rgba(21,24,27,0.92);
  backdrop-filter:blur(6px);
  z-index:50;
}
.top-row{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:0 24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none;color:var(--text);}
.brand .dot{width:10px;height:10px;background:var(--orange);border-radius:2px;transform:rotate(45deg);}
nav.tools-nav{display:flex;gap:6px;}
nav.tools-nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  padding:7px 12px;
  border-radius:6px;
  border:1px solid transparent;
}
nav.tools-nav a:hover{color:var(--text);border-color:var(--line);}
nav.tools-nav a.active{color:var(--orange);}

/* ===== artigo ===== */
.article-head{padding:56px 0 24px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--orange);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.article-head h1{
  font-size:clamp(28px,4.2vw,42px);
  line-height:1.12;
  margin:0 0 14px;
}
.article-meta{color:var(--muted);font-size:13px;font-family:'JetBrains Mono',monospace;}

article.prose{
  padding:8px 0 50px;
  font-size:16px;
  line-height:1.75;
  color:#d8d5cd;
}
article.prose p{margin:0 0 20px;}
article.prose strong{color:var(--text);}
article.prose ul{margin:0 0 20px;padding-left:22px;}
article.prose li{margin-bottom:10px;}
article.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}

.cta-box{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  border-radius:10px;
  padding:20px 22px;
  margin:36px 0;
}
.cta-box .cta-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}
.cta-box p{margin:0;color:var(--text);}
.cta-box a{
  display:inline-block;margin-top:12px;
  background:var(--orange);color:#1a1300;
  font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:8px;
  text-decoration:none;
}

.ad-slot{
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--muted);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  text-align:center;
  padding:18px;
  margin:40px 0;
}

.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);text-decoration:none;font-size:13px;
  margin-bottom:24px;
}
.back-link:hover{color:var(--text);}

/* ===== índice do blog ===== */
.blog-hero{padding:56px 0 30px;}
.blog-hero h1{font-size:clamp(30px,4.5vw,44px);margin:0 0 14px;}
.blog-hero p{color:var(--muted);font-size:16px;max-width:560px;line-height:1.6;}

.post-list{display:flex;flex-direction:column;gap:14px;padding-bottom:60px;}
.post-card{
  display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:22px 24px;text-decoration:none;color:var(--text);
  transition:border-color .15s ease, transform .15s ease;
}
.post-card:hover{border-color:var(--orange);transform:translateX(2px);}
.post-card .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--orange);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
.post-card h2{margin:0 0 8px;font-size:19px;}
.post-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;}

footer{
  border-top:1px solid var(--line);
  padding:34px 0 50px;
  color:var(--muted);
  font-size:13px;
}
footer .wrap-wide{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
footer a{color:var(--muted);}

@media (max-width:600px){
  nav.tools-nav{display:none;}
}