:root {
  --boo-blue: #46AAFF;
  --boo-blue-deep: #21659F;
  --boo-blue-soft: #9FD3FF;
  --page: #f3f4f9;
  --surface: #ffffff;
  --ink: #111827;
  --ink-800: #1f2937;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: #f3f4f6;
  --term: #15171b;
  --term-line: rgba(255, 255, 255, 0.06);
  --sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.21, .47, .32, .98);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 52px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink-800);
  font: 300 16px/1.625 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* grão de 3% sobre a página toda, como no site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* grade de 80px apagando em radial */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(70, 170, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(70, 170, 255, .07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 100%);
}

.mono { font-family: var(--mono); }
.dim { color: var(--muted-2); }
a { color: inherit; text-decoration: none; transition: color .2s; }

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background: rgba(243, 244, 249, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, .5);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 400; }
.brand-tld { color: var(--boo-blue); }
.nav nav { display: flex; gap: 24px; font-size: 14px; color: var(--muted); }
.nav nav a:hover { color: var(--ink); }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 5vw; }

.eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--boo-blue);
}
h1, h2 { font-weight: 400; letter-spacing: -.05em; color: var(--ink); margin: 0; }
h1 { font-size: 68px; line-height: 1.1; }
h1 span { color: var(--boo-blue); }
h2 { font-size: 34px; line-height: 1.15; }
.lede { max-width: 650px; margin: 20px 0 0; font-size: 18px; color: var(--muted); }

.hero { padding: 96px 0 48px; }

.term-wrap { padding-bottom: 96px; }
.term {
  background: var(--term);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 24px 48px rgba(70, 170, 255, .12);
  border: 1px solid rgba(31, 41, 55, .6);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-bottom: 1px solid var(--term-line);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #2b2f36; }
.dot:first-child { background: var(--boo-blue); }
.term-title { margin-left: 10px; font-size: 12px; color: #6b7280; }
.term-body {
  height: 420px;
  overflow-y: auto;
  padding: 20px 22px 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #e5e7eb;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: #2b2f36 transparent;
}
.term-body .row { min-height: 1.6em; }
.term-body .row.art { min-height: 0; line-height: 1.12; }
.term-body .echo { color: #e5e7eb; }
.term-body .echo b { color: var(--boo-blue); font-weight: 400; }
.term-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 22px 20px;
  font-size: 13.5px;
}
.prompt { color: var(--boo-blue); white-space: nowrap; }
.term-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #f3f4f9;
  font: inherit;
  caret-color: var(--boo-blue);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips button {
  font: 400 12px var(--mono);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .2s;
}
.chips button:hover { color: var(--ink); border-color: #bfdbfe; }
.chips button:active { transform: scale(.95); }

.cli { padding: 64px 0 128px; border-top: 1px solid rgba(226, 232, 240, .5); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .01);
  transition: all .3s var(--ease);
}
.card:hover { border-color: #bfdbfe; box-shadow: 0 24px 48px rgba(70, 170, 255, .08); }
.kicker { margin: 0 0 14px; font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-2); }
.card { cursor: pointer; }
.card:active { transform: scale(.98); }
.card pre { margin: 0; font-size: 13px; color: var(--ink-800); white-space: pre-wrap; }
.card.copied .kicker::after { content: " · copiado"; color: var(--boo-blue); }
.card .p { color: var(--muted-2); }
.card .h { color: var(--boo-blue); }

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 5vw;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid rgba(226, 232, 240, .5);
}

.reveal { opacity: 0; transform: translateY(20px); animation: in .8s var(--ease) forwards; }
.reveal:nth-child(2) { animation-delay: .08s; }
.reveal:nth-child(3) { animation-delay: .16s; }
@keyframes in { to { opacity: 1; transform: none; } }

.ghost-fly {
  position: fixed;
  width: 56px;
  left: -80px;
  bottom: 20vh;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
}
.ghost-fly.go { animation: fly 4.5s var(--ease) forwards; }
@keyframes fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(-6deg); }
  10% { opacity: 1; }
  50% { transform: translate(55vw, -18vh) rotate(6deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(115vw, -4vh) rotate(-4deg); }
}

@media (max-width: 760px) {
  h1 { font-size: 44px; }
  h2 { font-size: 26px; }
  .hero { padding: 64px 0 32px; }
  .nav nav a:first-child { display: none; }
  .term { border-radius: 18px; }
  .term-body { height: 360px; font-size: 11.5px; padding: 16px 14px 4px; }
  .term-input { padding: 6px 14px 16px; font-size: 12.5px; }
  .prompt { font-size: 12px; }
  .cards { grid-template-columns: 1fr; }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .ghost-fly.go { animation: none; }
}