/* ===== camada tech / vibe-coding (carregada depois de styles.css) ===== */
.mono{font-family:"Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace}
.blink{animation:blink 1s steps(1) infinite;color:var(--gold)}
@keyframes blink{50%{opacity:0}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(#0f3550 1px,transparent 1px),linear-gradient(90deg,#0f3550 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%)}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.fx-glow{position:fixed;width:520px;height:520px;left:-999px;top:0;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#00d1ff22,transparent 65%);transform:translate(-50%,-50%)}
.hero{background:radial-gradient(ellipse at 80% 40%,#082b4c99,transparent 55%),transparent}
.alt{background:#081a2ccc}
.hero h1 em{background:linear-gradient(90deg,#00d1ff,#4da3ff,#00d1ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 5s linear infinite;text-shadow:none}
@keyframes flow{to{background-position:200% 0}}
.eyebrow.mono{letter-spacing:.06em;font-size:14px;text-transform:none}
.card{position:relative}
.card::before{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,#00d1ff,transparent 35%,transparent 65%,#ffb703);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* CTA */
.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#00d1ff 0%,#0a8bff 55%,#0066ff 100%);color:#04101d;
  box-shadow:0 0 0 0 #00d1ff66,0 8px 30px #0066ff55;animation:pulse 2.6s ease-out infinite;
  transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-70%}100%{left:130%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #00d1ff66,0 8px 30px #0066ff55}70%,100%{box-shadow:0 0 0 18px #00d1ff00,0 8px 30px #0066ff55}}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.1)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn .arr{font-style:normal;font-size:1.2em;transition:transform .2s}
.btn:hover .arr{transform:translateX(5px)}
.btn-lg{font-size:16px;padding:18px 26px}
.card .btn-primary{width:100%}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid #143e58;background:#0a1c30;padding:14px 0;color:#7fa0bd;font-size:13px;letter-spacing:.3em;white-space:nowrap}
.ticker .track{display:inline-flex;gap:34px;animation:marq 28s linear infinite;padding-left:34px}
.ticker .track span:nth-child(even){color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* terminal demo */
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.term{background:#04101d;border:1px solid #1c5878;border-radius:16px;box-shadow:0 0 70px #0066ff2a;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#0b2238;border-bottom:1px solid #163e58}
.term-bar i{width:11px;height:11px;border-radius:50%}
.term-bar span{margin-left:10px;font:600 12px "Cascadia Code",Consolas,monospace;color:#7fa0bd}
.term-body{padding:20px 22px;min-height:340px;font:500 14px/1.7 "Cascadia Code",Consolas,monospace;color:#cfe0ee}
.term-body pre{margin:0;display:inline;white-space:pre-wrap;font:inherit}
.term-body .p{color:var(--gold)}.term-body .ok{color:#5fd1a0}.term-body .bad{color:#ff8a99}.term-body .v{color:var(--gold);font-weight:700}
.cursor{display:inline-block;width:9px;height:16px;background:var(--cyan);vertical-align:-3px;animation:blink 1s steps(1) infinite}

/* revelar ao rolar + hover */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.pose,.item,.step{transition:transform .25s,border-color .25s,box-shadow .25s,opacity .7s}
.pose.in:hover,.item.in:hover,.step.in:hover{transform:translateY(-6px);border-color:#00d1ff80;box-shadow:0 14px 40px #00d1ff1f}

/* CTA fixo no celular */
.sticky-cta{display:none}
@media(max-width:860px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px;background:#061426ee;border-top:1px solid #16405a;backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .3s}
  .sticky-cta.show{transform:none}
  .sticky-cta .btn{width:100%}
  body{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-primary::after,.hero h1 em,.ticker .track,.blink,.cursor{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}
.term.vid{padding:0;aspect-ratio:16/9}.term.vid video{display:block;width:100%;height:100%;object-fit:cover}