/* Base fluida / legibilidade em viewports pequenos */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%;height:auto}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:#0a0812;
  --white:#f5f3ff;
  --accent:#7c3aed;
  --accent-soft:#8b5cf6;
  --accent-deep:#5b21b6;
  --muted:#8e8c9a;
  --glass:rgba(124,58,237,0.06);
  --border:rgba(124,58,237,0.14);
  --ok:#22c55e;
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* Movimento — easings partilhados (UI + alinhamento mental com GSAP power/expo) */
  --ease-out-smooth:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-smooth:cubic-bezier(.4,0,1,.18);
  --ease-spring:cubic-bezier(.34,1.18,.64,1);
  --dur-ui:.32s;
  --dur-scene:.55s;
}

html,body{width:100%;height:100%;overflow:hidden;background:var(--black);color:var(--white);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.rt-skip{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.rt-skip:focus{
  position:fixed;left:16px;top:16px;z-index:20000;width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;overflow:visible;
  background:#1e1b2e;color:#f5f3ff;border-radius:10px;font-size:.875rem;font-weight:600;text-decoration:none;
  outline:2px solid var(--accent-soft);outline-offset:2px;
}

/* Splash inicial — até o site estar pronto */
.rt-splash{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 80% 55% at 50% -20%,rgba(124,58,237,.22) 0%,transparent 55%),
    linear-gradient(168deg,#020105 0%,#0b0620 32%,#160d35 62%,#08051a 100%);
  transition:opacity var(--dur-scene) var(--ease-out-smooth),visibility var(--dur-scene),filter .65s var(--ease-out-smooth);
}
.rt-splash--out{
  opacity:0;visibility:hidden;pointer-events:none;
  filter:blur(10px) saturate(1.08);
}
.rt-splash__inner{
  text-align:center;padding:32px;max-width:90vw;
  animation:rt-splash-enter .88s var(--ease-out-expo) both;
}
.rt-splash--out .rt-splash__inner{
  animation:none;
  opacity:0;
  transform:translateY(14px) scale(.97);
  transition:opacity .48s var(--ease-out-smooth),transform .58s var(--ease-out-smooth);
}
@keyframes rt-splash-enter{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.rt-splash__logo{
  font-weight:600;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-0.02em;color:var(--white);
  text-shadow:0 0 40px rgba(124,58,237,.2),0 2px 24px rgba(0,0,0,.45);
}
.rt-splash__logo span{
  color:var(--accent-soft);font-weight:600;
  background:linear-gradient(135deg,#c4b5fd 0%,var(--accent-soft) 50%,#a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(139,92,246,.35));
}
.rt-splash__bar{
  height:4px;width:min(280px,76vw);margin:28px auto 0;border-radius:6px;
  background:rgba(124,58,237,.14);overflow:hidden;
  box-shadow:0 0 28px rgba(124,58,237,.18) inset,0 1px 0 rgba(255,255,255,.04) inset;
}
.rt-splash__fill{
  height:100%;width:42%;
  background:linear-gradient(105deg,#4c1d95 0%,#7c3aed 35%,#c4b5fd 72%,#8b5cf6 100%);
  background-size:200% 100%;
  border-radius:6px;
  box-shadow:0 0 20px rgba(167,139,250,.45);
  animation:rt-splash-shimmer 1.45s var(--ease-out-smooth) infinite,rt-splash-hue 4s ease-in-out infinite;
  will-change:transform;
}
@keyframes rt-splash-shimmer{
  0%{transform:translateX(-120%) skewX(-8deg)}
  100%{transform:translateX(320%) skewX(-8deg)}
}
@keyframes rt-splash-hue{
  0%,100%{background-position:0% 50%;filter:brightness(1)}
  50%{background-position:100% 50%;filter:brightness(1.08)}
}
.rt-splash__hint{
  margin-top:20px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(196,181,253,.5);font-weight:500;
  animation:rt-splash-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes rt-splash-hint-pulse{
  0%,100%{opacity:.45;letter-spacing:.14em}
  50%{opacity:.85;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  .rt-splash{transition:opacity .2s ease,visibility .2s}
  .rt-splash--out{filter:none}
  .rt-splash__inner{animation:none}
  .rt-splash--out .rt-splash__inner{transform:none;transition:opacity .18s ease}
  .rt-splash__logo span{-webkit-text-fill-color:var(--accent-soft);color:var(--accent-soft);filter:none;background:none;-webkit-background-clip:unset;background-clip:unset}
  .rt-splash__fill{animation:none;width:100%;opacity:.55;transform:none;filter:none;box-shadow:none}
  .rt-splash__hint{animation:none;opacity:.65}
}

/* Fundo + camada “mundo tech” em movimento */
#bg{
  position:fixed;inset:0;z-index:0;
  transition:background 1.45s cubic-bezier(.4,0,.15,1);
  pointer-events:none;
}
#bgmesh{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  overflow:hidden;
  --mesh-a:rgba(124,58,237,.16);
  --mesh-b:rgba(56,189,248,.1);
  --mesh-c:rgba(167,139,250,.12);
}
.bgmesh-flow{
  position:absolute;inset:-15%;
  background:
    radial-gradient(ellipse 85% 55% at 18% 28%,var(--mesh-a),transparent 52%),
    radial-gradient(ellipse 70% 50% at 88% 72%,var(--mesh-b),transparent 55%),
    radial-gradient(ellipse 55% 70% at 48% 102%,var(--mesh-c),transparent 48%);
  animation:bgmesh-flow-morph 22s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.bgmesh-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 0%,rgba(0,0,0,.35) 100%);
  opacity:.45;
  pointer-events:none;
}
@keyframes bgmesh-flow-morph{
  0%{transform:scale(1) translate(0,0);opacity:.76}
  50%{opacity:.92}
  100%{transform:scale(1.1) translate(-2.5%,1.8%);opacity:1}
}
body.scene-light #bgmesh .bgmesh-flow{opacity:.5}
body.scene-light #bgmesh .bgmesh-vignette{opacity:.15}
/* Camada cósmica — estrelas + cometas (todas as cenas) */
#bg-cosmos{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.82;transition:opacity 1.15s cubic-bezier(.4,0,.15,1);
}
body.scene-light #bg-cosmos{opacity:.36}
body[data-rt-cosmos="galaxy"] #bg-cosmos{opacity:.93}
body[data-rt-cosmos="storm"] #bg-cosmos{opacity:.95}
body[data-rt-cosmos="ember"] #bg-cosmos{opacity:.88}
body[data-rt-cosmos="ocean"] #bg-cosmos{opacity:.9}
body[data-rt-cosmos="aurora"] #bg-cosmos{opacity:.91}
body[data-rt-cosmos="standard"] #bg-cosmos{opacity:.84}
body[data-rt-cosmos="lite"] #bg-cosmos{opacity:.34}
@media (prefers-reduced-motion:reduce){
  body[data-rt-cosmos] #bg-cosmos{opacity:.52!important}
  body.scene-light #bg-cosmos{opacity:.28!important}
}
@media (prefers-reduced-motion:reduce){
  #bg-cosmos{opacity:.55}
  body.scene-light #bg-cosmos{opacity:.28}
  .bgmesh-flow{animation:none!important;opacity:.85}
  .hero-parallax{transform:none!important}
}
#mglow{
  position:fixed;pointer-events:none;z-index:1;
  width:min(120vw,900px);height:min(120vw,900px);
  left:50%;top:42%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.14) 0%,rgba(88,28,135,.06) 38%,transparent 68%);
  transition:background 1.1s cubic-bezier(.45,0,.2,1),opacity .8s ease;
  will-change:opacity,transform;
  animation:mglow-drift 20s ease-in-out infinite alternate;
}
@keyframes mglow-drift{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(1)}
  100%{transform:translate(-50%,-50%) translate(min(3vw,28px),max(-2vw,-18px)) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  #mglow{animation:none}
}
/* Ponte entre atmosferas — lavagem suave (evita “flash” branco duro) */
#atmo-bridge{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 98% 88% at 50% 44%,rgba(237,233,254,.42) 0%,rgba(199,210,254,.22) 42%,rgba(165,180,252,.1) 68%,transparent 92%);
  will-change:opacity;
}
/* Flash radial na troca de cena — acima do conteúdo, abaixo do nav */
#rt-page-wipe{
  position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%,rgba(124,58,237,.5) 0%,rgba(124,58,237,.12) 38%,transparent 62%);
  mix-blend-mode:screen;
  will-change:opacity,transform;
}
@media (prefers-reduced-motion:reduce){
  #rt-page-wipe{display:none!important}
}
#vp{position:fixed;inset:0;overflow:hidden;z-index:2}

/* Incidente Entrega (s7) — véu vermelho em toda a viewport, por cima do site (abaixo do modal z 210) */
body.rt-s7-red-veil::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:199;
  pointer-events:none;
  background:
    radial-gradient(ellipse 100% 85% at 50% 30%,rgba(254,226,226,.35) 0%,transparent 50%),
    linear-gradient(168deg,rgba(220,38,38,.94) 0%,rgba(127,29,29,.97) 38%,rgba(69,10,10,.99) 100%);
  animation:rt-s7-veil-flash 3.45s cubic-bezier(.32,0,.18,1) forwards;
}
@keyframes rt-s7-veil-flash{
  0%{opacity:0}
  4%{opacity:1}
  91%{opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  body.rt-s7-red-veil::after{animation:none!important;opacity:.92}
}

.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;min-height:0;will-change:opacity,transform}
.scene.on{opacity:1;pointer-events:all}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 48px;display:flex;align-items:center;justify-content:space-between}
nav.s{
  background:rgba(10,8,18,.82);backdrop-filter:saturate(1.2) blur(20px);-webkit-backdrop-filter:saturate(1.2) blur(20px);
  border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(124,58,237,.06);
  transition:background .4s var(--ease-out-smooth),border-color .4s,box-shadow .45s;
}
.logo{font-weight:600;font-size:1.125rem;letter-spacing:-0.02em;color:var(--white);transition:opacity var(--dur-ui) var(--ease-out-smooth),filter var(--dur-ui)}
.logo span{color:var(--accent-soft);font-weight:600}
.nl{display:flex;gap:36px;align-items:center}
.nl a{
  position:relative;font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;font-weight:500;padding:6px 2px;
  transition:color var(--dur-ui) var(--ease-out-smooth),text-shadow var(--dur-ui);
}
.nl a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-soft));
  transform:scaleX(0);transform-origin:left;opacity:.9;
  transition:transform .38s var(--ease-out-expo),opacity .25s ease;
}
.nl a:hover,.nl a:focus-visible{color:var(--white);text-shadow:0 0 20px rgba(139,92,246,.25)}
.nl a:hover::after,.nl a:focus-visible::after{transform:scaleX(1)}
.nl a:focus-visible{outline:2px solid rgba(139,92,246,.5);outline-offset:4px;border-radius:4px}
.ncta{
  background:var(--accent);color:#fff;border:none;padding:10px 22px;font-family:var(--font-sans);font-weight:600;font-size:0.8125rem;letter-spacing:0.04em;border-radius:10px;cursor:pointer;
  box-shadow:0 4px 16px rgba(124,58,237,.28),0 1px 0 rgba(255,255,255,.12) inset;
  transition:background var(--dur-ui) var(--ease-out-smooth),transform var(--dur-ui) var(--ease-spring),box-shadow var(--dur-ui),filter var(--dur-ui);
}
.ncta:hover{
  background:var(--accent-soft);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(124,58,237,.38),0 1px 0 rgba(255,255,255,.15) inset;
}
.ncta:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.ncta:active{transform:translateY(0);box-shadow:0 2px 12px rgba(124,58,237,.25)}
@media (prefers-reduced-motion:reduce){
  .nl a::after{transition:none}
  .nl a:hover::after,.nl a:focus-visible::after{transform:scaleX(1)}
  .ncta,.ncta:hover,.ncta:active{transform:none;transition:background .15s ease}
}

/* PROGRESS */
#pb{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:200;flex-wrap:wrap;justify-content:center;max-width:min(96vw,720px);
  visibility:hidden;pointer-events:none;opacity:0;height:0;width:0;overflow:hidden;clip:rect(0,0,0,0);
  margin:0;padding:0;border:0;
}
.pd{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14);cursor:pointer;
  transition:width .52s var(--ease-spring),background .4s var(--ease-out-smooth),border-radius .45s var(--ease-spring),box-shadow .45s ease,transform .28s var(--ease-out-smooth);
}
.pd.on{
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-soft));
  width:28px;border-radius:4px;
  box-shadow:0 0 14px rgba(139,92,246,.45),0 0 6px rgba(124,58,237,.3);
}

/* SIDE */
/* HERO */
/* Não usar position:relative aqui: sobrescreve .scene e a cena deixa de ter altura total — só .hc “encolhe” e o resto fica vazio */
#s0{
  background:transparent;
  --s0-px:0px;
  --s0-py:0px;
  isolation:isolate;
  min-height:0;
  width:100%;
}
#s0 .ht,#s0 .hs{
  text-shadow:0 2px 28px rgba(3,2,12,.9),0 1px 4px rgba(0,0,0,.55);
}
#s0.hero-pre .shi-wrap{opacity:0}
#s0.hero-pre .hero-parallax__inner{
  opacity:0;
  transform:scale(0.84);
  filter:blur(18px);
}
#s0.hero-pre .ht-line,#s0.hero-pre .hs,#s0.hero-pre .hbtns{
  opacity:0;
  transform:translateY(36px);
}
@media (prefers-reduced-motion:reduce){
  #s0.hero-pre .shi-wrap{opacity:1}
  #s0.hero-pre .hero-parallax__inner{opacity:1;transform:none;filter:none}
  #s0.hero-pre .ht-line,#s0.hero-pre .hs,#s0.hero-pre .hbtns{opacity:1;transform:none}
}
.hero-parallax{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  transform:translate3d(var(--s0-px),var(--s0-py),0);
  will-change:transform;
}
.hero-parallax__inner{
  position:absolute;inset:0;
  transform-origin:50% 46%;
  will-change:transform,opacity,filter;
}
#ch{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.hc{position:relative;z-index:2;text-align:center;max-width:880px;padding:min(28px,5vh) clamp(20px,4vw,40px) max(100px,calc(72px + env(safe-area-inset-bottom,0px)))}
/* Hero: padding equilibrado — o padding inferior grande no .hc empurrava o título para o topo do viewport */
#s0 .hc{
  padding:clamp(24px,5vh,44px) clamp(20px,4vw,40px) clamp(20px,4vh,32px);
  padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom,0px)));
}
/* Título: só .ht-line em bloco — sem <br> para não duplicar entrelinha */
#s0 .ht{
  font-size:clamp(2.5rem,7vw,4.25rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-0.04em;
  margin-bottom:22px;
  color:var(--white);
}
#s0 .ht-line{
  display:block;
  margin:0;
  padding:0;
  line-height:1.03;
}
#s0 .ht-line+.ht-line{margin-top:-0.04em}
@media (max-width:520px){
  #s0 .ht-line+.ht-line{margin-top:-0.06em}
}
.ht-accent{color:var(--accent-soft);font-weight:600}
.hs{font-size:1.0625rem;color:var(--muted);line-height:1.65;max-width:32rem;margin:0 auto 32px;font-weight:400}
.hbtns{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:min(100%,480px);margin:0 auto}
.hsvc{width:100%}
.hsvc__kicker{
  display:block;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:12px;font-weight:600
}
.hsvc__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
@media(max-width:380px){.hsvc__grid{grid-template-columns:1fr}}
.hsvc__card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:rgba(124,58,237,.07);text-decoration:none;color:var(--white);
  transition:border-color var(--dur-ui) var(--ease-out-smooth),background var(--dur-ui),transform var(--dur-ui) var(--ease-spring),box-shadow .35s var(--ease-out-smooth);
  outline:none
}
.hsvc__card:hover,.hsvc__card:focus-visible{
  border-color:rgba(139,92,246,.5);background:rgba(124,58,237,.14);
  transform:translateY(-3px);box-shadow:0 16px 40px rgba(124,58,237,.2),0 0 0 1px rgba(139,92,246,.12)
}
.hsvc__row{display:flex;align-items:center;gap:8px;width:100%}
.hsvc__dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 12px rgba(34,197,94,.45)}
.hsvc__name{font-weight:600;font-size:.9375rem;letter-spacing:-.02em;line-height:1.2}
.hsvc__desc{font-size:11px;color:var(--muted);font-weight:400;line-height:1.4}
.hsvc__tag{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-soft);opacity:.9}
.hcta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;width:100%}
.hcta-row--solo{justify-content:center;max-width:100%}
.scene--services{
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:max(64px,9vh) clamp(20px,4vw,48px) max(28px,calc(20px + env(safe-area-inset-bottom,0px)));
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.scene--services .svc-shell{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  max-width:min(980px,94vw);
  margin:0 auto;
  min-height:0;
}
.scene--services .hsvc{width:100%}
.scene--services .hsvc__kicker{
  display:block;
  text-align:center;
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.16em;
  margin-bottom:clamp(14px,2.5vh,22px);
}
.scene--services .svc-title{
  font-size:clamp(1.55rem,3.8vw,2.35rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  text-align:center;
  color:var(--white);
  margin:0 auto clamp(28px,5vh,48px);
  max-width:18ch;
}
.scene--services .hsvc__grid{
  width:100%;
  max-width:100%;
  gap:clamp(14px,2.2vw,26px);
  grid-template-columns:1fr 1fr;
}
.scene--services .hsvc__card{
  padding:clamp(20px,2.8vw,28px) clamp(22px,3vw,32px);
  border-radius:16px;
  gap:10px;
  border-color:rgba(139,92,246,.28);
  background:rgba(124,58,237,.1);
  box-shadow:0 20px 56px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.04) inset;
}
.scene--services .hsvc__card:hover,.scene--services .hsvc__card:focus-visible{
  box-shadow:0 28px 72px rgba(124,58,237,.22),0 0 0 1px rgba(196,181,253,.2) inset;
}
.scene--services .hsvc__dot{
  width:10px;height:10px;
  box-shadow:0 0 16px rgba(34,197,94,.55);
}
.scene--services .hsvc__name{
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:-.025em;
}
.scene--services .hsvc__tag{
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.08em;
}
.scene--services .hsvc__desc{
  font-size:clamp(13px,1.35vw,15px);
  line-height:1.55;
  color:#b8b0c8;
}
.scene--services .shi-wrap{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  flex-shrink:0;
  margin-top:clamp(36px,7vh,72px);
  padding-bottom:max(20px,3.5vh);
  z-index:3;
}
@media (max-width:640px){
  .scene--services .hsvc__grid{grid-template-columns:1fr}
  .scene--services .svc-title{max-width:100%}
}
.bp{background:var(--accent);color:#fff;border:none;padding:14px 32px;font-family:var(--font-sans);font-weight:600;font-size:0.8125rem;letter-spacing:0.03em;border-radius:10px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
a.bp{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
a.bp:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.bp:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 16px 40px rgba(124,58,237,.25)}
.bg2{background:transparent;color:var(--white);border:1px solid var(--border);padding:13px 32px;font-family:var(--font-sans);font-weight:500;font-size:0.8125rem;letter-spacing:0.03em;border-radius:10px;cursor:pointer;transition:border-color .2s,color .2s}
.bg2:hover{border-color:rgba(139,92,246,.45);color:var(--accent-soft)}
/* Hint de scroll: base; no hero fica ancorado em baixo para não cobrir o título */
.shi-wrap{
  position:absolute;left:50%;bottom:max(32px,5vh);top:auto;
  transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;
}
#s0 .shi-wrap{
  bottom:max(28px,calc(5vh + env(safe-area-inset-bottom,0px)));
}
.shi{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.18em;text-transform:uppercase;
  cursor:pointer;
}
.shi::after{content:'';width:1px;height:32px;background:linear-gradient(to bottom,var(--muted),transparent);opacity:.5}

/* PILARES — um tom por cena para não parecer “duas páginas brancas” seguidas */
.scene--pilar{
  color:#16131f;
  flex-direction:column;
  padding:max(88px,calc(72px + env(safe-area-inset-top,0px))) clamp(20px,4vw,48px) max(64px,calc(48px + env(safe-area-inset-bottom,0px)));
  align-items:center;
  justify-content:flex-start;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;
  max-width:100vw;
  min-height:0;
  box-sizing:border-box;
}
.scene--pilar > .pilar-grid{
  margin-top:auto;
  margin-bottom:auto;
  flex-shrink:0;
}
/* Galáxia — campo de estrelas (s3–s6) */
.rt-galaxy-stars{
  position:absolute;inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 6% 11%,rgba(255,255,255,.92),transparent),
    radial-gradient(1px 1px at 14% 44%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 23% 18%,rgba(221,214,254,.95),transparent),
    radial-gradient(1px 1px at 31% 62%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 42% 8%,rgba(255,255,255,.78),transparent),
    radial-gradient(1px 1px at 51% 71%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 58% 28%,rgba(255,255,255,.88),transparent),
    radial-gradient(1px 1px at 67% 88%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 76% 14%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 84% 52%,rgba(255,255,255,.52),transparent),
    radial-gradient(1.5px 1.5px at 91% 76%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 11% 82%,rgba(255,255,255,.38),transparent),
    radial-gradient(1px 1px at 19% 28%,rgba(255,255,255,.62),transparent),
    radial-gradient(1px 1px at 37% 91%,rgba(196,181,253,.65),transparent),
    radial-gradient(1px 1px at 46% 38%,rgba(255,255,255,.48),transparent),
    radial-gradient(1.2px 1.2px at 63% 6%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 72% 48%,rgba(255,255,255,.58),transparent),
    radial-gradient(1px 1px at 88% 19%,rgba(255,255,255,.72),transparent),
    radial-gradient(1px 1px at 96% 63%,rgba(255,255,255,.44),transparent),
    radial-gradient(1px 1px at 3% 56%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 54% 94%,rgba(167,139,250,.85),transparent),
    radial-gradient(1px 1px at 69% 41%,rgba(255,255,255,.66),transparent),
    radial-gradient(1px 1px at 48% 58%,rgba(255,255,255,.42),transparent),
    radial-gradient(1.2px 1.2px at 81% 91%,rgba(255,255,255,.8),transparent);
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.5;
  animation:rt-galaxy-stars-drift 95s linear infinite;
  z-index:1;
}
.rt-galaxy-stars--b{
  opacity:.28;
  animation-duration:150s;
  animation-direction:reverse;
  z-index:2;
  filter:blur(0.45px);
}
@keyframes rt-galaxy-stars-drift{
  to{transform:translate(-2.8%,-1.8%)}
}
.s6-galaxy-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.s6-galaxy-bg__mist{
  position:absolute;inset:-18%;
  z-index:0;
  background:
    radial-gradient(ellipse 75% 55% at 25% 22%,rgba(124,58,237,.15) 0%,transparent 52%),
    radial-gradient(ellipse 65% 50% at 88% 68%,rgba(99,102,241,.12) 0%,transparent 48%);
  opacity:.88;
  animation:s6-galaxy-mist 28s ease-in-out infinite alternate;
}
@keyframes s6-galaxy-mist{
  0%{opacity:.78;transform:scale(1)}
  100%{opacity:1;transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .rt-galaxy-stars,.rt-galaxy-stars--b{animation:none!important;transform:none!important}
  .s6-galaxy-bg__mist{animation:none!important;transform:none!important;opacity:.88}
}
/* position:absolute vem de .scene — relative aqui quebrava altura da cena (igual ao #s0) */
#s2.scene--pilar{
  overflow-x:hidden;
  overflow-y:auto;
  --s2-px:0px;
  --s2-py:0px;
  background:linear-gradient(152deg,#aeb4bf 0%,#c4c9d2 28%,#b5bac5 55%,#d0d4dc 100%);
}
/* Fundo API / gateway — camadas + parallax no scroll (variáveis --s2-px/py) */
.s2-api-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  transform:translate3d(var(--s2-px),var(--s2-py),0);
  will-change:transform;
}
.s2-api-bg__mesh{
  position:absolute;inset:-28%;
  opacity:.52;
  background:
    radial-gradient(ellipse 85% 65% at 15% 25%,rgba(255,255,255,.14) 0%,transparent 52%),
    radial-gradient(ellipse 72% 55% at 88% 72%,rgba(55,65,81,.08) 0%,transparent 48%),
    radial-gradient(ellipse 50% 42% at 48% 48%,rgba(255,255,255,.06) 0%,transparent 58%),
    conic-gradient(from 220deg at 60% 40%,rgba(255,255,255,.035),transparent 26%,rgba(75,85,99,.05),transparent 56%,rgba(255,255,255,.03));
  animation:s2-mesh-drift 34s linear infinite;
}
@keyframes s2-mesh-drift{
  to{transform:translate(-4%,-3%) rotate(2deg)}
}
.s2-api-bg__routes{
  position:absolute;inset:0;
  background:
    linear-gradient(95deg,transparent 46%,rgba(55,65,81,.09) 50%,transparent 54%);
  background-size:280% 100%;
  animation:s2-routes 11s ease-in-out infinite;
  opacity:.5;
}
@keyframes s2-routes{
  0%{background-position:120% 50%}
  100%{background-position:-80% 50%}
}
.s2-api-bg__pulse{
  position:absolute;inset:-5%;
  background:
    radial-gradient(ellipse 50% 40% at 25% 40%,rgba(255,255,255,.12) 0%,transparent 55%),
    radial-gradient(ellipse 45% 38% at 78% 65%,rgba(31,41,55,.1) 0%,transparent 50%);
  animation:s2-pulse-bloom 16s ease-in-out infinite alternate;
}
@keyframes s2-pulse-bloom{
  0%{opacity:.65;transform:scale(1)}
  100%{opacity:1;transform:scale(1.05)}
}
#s2 .pilar-grid{position:relative;z-index:1}
.s2-glass__hint{
  display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px 14px;
  border-radius:12px;background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.14);
  font-size:.8125rem;line-height:1.55;color:#1e3a5f;
}
.s2-glass__badge{
  align-self:flex-start;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:#2563eb;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.85);border:1px solid rgba(59,130,246,.22);
}
.pwin__pill--err{
  background:rgba(239,68,68,.18)!important;color:#fecaca!important;
  border:1px solid rgba(248,113,113,.45)!important;
  box-shadow:0 0 16px rgba(239,68,68,.15);
}
.pwin__pill--warn{
  background:rgba(234,179,8,.14)!important;color:#fde047!important;
  border:1px solid rgba(250,204,21,.42)!important;
  box-shadow:0 0 14px rgba(234,179,8,.12);
}
#s2-p95,#s2-rpm{font-variant-numeric:tabular-nums;display:inline-block;min-width:2.2ch;text-align:right}
#s2 .pflow__arrow{
  animation:s2-arrow-flow 1.45s ease-in-out infinite;
}
@keyframes s2-arrow-flow{
  0%,100%{opacity:.4;transform:translateX(0)}
  50%{opacity:1;transform:translateX(4px)}
}
#s2 .api-row--busy::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(129,140,248,.22),transparent);
  background-size:200% 100%;
  animation:api-row-shimmer 1.1s linear infinite;
}
@keyframes api-row-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
#s2 .api-row--err{
  border-color:rgba(248,113,113,.45)!important;
  background:rgba(127,29,29,.2)!important;
  box-shadow:0 0 0 1px rgba(248,113,113,.12);
}
.api-row__meta{
  font-family:var(--font-mono);font-size:8px;font-weight:700;margin-left:8px;min-width:28px;text-align:right;
  color:#fca5a5;letter-spacing:.02em;
}
@media (prefers-reduced-motion:reduce){
  .s2-api-bg__mesh,.s2-api-bg__routes,.s2-api-bg__pulse,#s2 .pflow__arrow{animation:none!important}
  .s2-api-bg{transform:none!important}
  #s2 .api-row--busy::after{animation:none;opacity:.35}
}
#s3.scene--pilar{
  overflow-x:hidden;
  overflow-y:auto;
  color:#e8e4f7;
  background:radial-gradient(ellipse 130% 90% at 50% -15%,#1f1235 0%,#0c0618 42%,#030208 100%);
}
/* Fundo vivo — UI / front (Pilar 02) */
.s3-ui-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.s3-ui-bg__mesh{
  position:absolute;inset:-30%;
  opacity:.58;
  background:
    radial-gradient(ellipse 80% 62% at 18% 22%,rgba(192,132,252,.13) 0%,transparent 50%),
    radial-gradient(ellipse 70% 58% at 90% 68%,rgba(244,114,182,.1) 0%,transparent 48%),
    radial-gradient(ellipse 48% 40% at 52% 45%,rgba(167,139,250,.06) 0%,transparent 55%),
    conic-gradient(from 140deg at 40% 70%,rgba(139,92,246,.035),transparent 28%,rgba(216,180,254,.05),transparent 62%);
  animation:s3-mesh-drift 36s linear infinite;
}
@keyframes s3-mesh-drift{
  to{transform:translate(3%,-4%) rotate(-1.5deg)}
}
.s3-ui-bg__bloom{
  position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%,rgba(216,180,254,.22) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 70%,rgba(244,114,182,.14) 0%,transparent 50%),
    radial-gradient(ellipse 40% 35% at 55% 95%,rgba(167,139,250,.12) 0%,transparent 45%);
  animation:s3-bloom-morph 18s ease-in-out infinite alternate;
}
@keyframes s3-bloom-morph{
  0%{opacity:.75;transform:scale(1) translate(0,0)}
  100%{opacity:1;transform:scale(1.06) translate(-2%,1%)}
}
.s3-ui-bg__sweep{
  position:absolute;inset:-5%;
  background:linear-gradient(
    118deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.14) 49%,
    rgba(196,181,253,.2) 50%,
    rgba(255,255,255,.12) 51%,
    transparent 60%,
    transparent 100%
  );
  background-size:220% 220%;
  animation:s3-sweep 14s ease-in-out infinite;
  opacity:.55;
}
@keyframes s3-sweep{
  0%{background-position:80% 20%}
  50%{background-position:20% 80%}
  100%{background-position:80% 20%}
}
.s3-ui-bg__scan{
  position:absolute;inset:-22%;
  background:linear-gradient(
    102deg,
    transparent 0%,
    transparent 34%,
    rgba(124,58,237,.055) 47%,
    rgba(196,181,253,.09) 50%,
    rgba(124,58,237,.055) 53%,
    transparent 66%,
    transparent 100%
  );
  background-size:220% 220%;
  animation:s3-scan-wave 26s ease-in-out infinite;
  mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
  opacity:.72;
}
@keyframes s3-scan-wave{
  0%{background-position:0% 32%}
  50%{background-position:100% 68%}
  100%{background-position:0% 32%}
}
.s3-ui-bg__dots{
  position:absolute;inset:-8%;
  background-image:
    radial-gradient(ellipse 42% 38% at 22% 28%,rgba(124,58,237,.09) 0%,transparent 55%),
    radial-gradient(ellipse 38% 36% at 78% 18%,rgba(192,132,252,.07) 0%,transparent 52%),
    radial-gradient(ellipse 35% 32% at 72% 82%,rgba(167,139,250,.07) 0%,transparent 50%),
    radial-gradient(ellipse 36% 34% at 12% 78%,rgba(216,180,254,.06) 0%,transparent 48%);
  background-size:100% 100%;
  animation:s3-dots-pan 48s ease-in-out infinite;
  opacity:.48;
}
@keyframes s3-dots-pan{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(2.5%,-1.5%) scale(1.02)}
  66%{transform:translate(-1.5%,2%) scale(1.01)}
  100%{transform:translate(0,0) scale(1)}
}
#s3 .pilar-grid{position:relative;z-index:1}
#s3 .s3-ui-bg__mesh{opacity:.42}
#s3 .s3-ui-bg__bloom{opacity:.55}
#s3 .s3-ui-bg__sweep{opacity:.35}
#s3 .s3-ui-bg__scan{opacity:.5}
#s3 .s3-ui-bg__dots{opacity:.32}
#s3 .pilar-glass,#s4 .pilar-glass,#s5 .pilar-glass{
  background:rgba(14,10,26,.82);
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 28px 72px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) inset;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
#s3 .pilar-glass h2,#s4 .pilar-glass h2,#s5 .pilar-glass h2{color:#faf8ff}
#s3 .pilar-glass > p,#s4 .pilar-glass > p,#s5 .pilar-glass > p{color:#b8b0d4}
#s3 .pilar-list li,#s4 .pilar-list li,#s5 .pilar-list li{color:#d8d2ec}
#s3 .pilar-kicker,#s4 .pilar-kicker,#s5 .pilar-kicker{color:#c4b5fd}
#s4.scene--pilar{
  overflow-x:hidden;
  overflow-y:auto;
  color:#f0ecff;
  background:#000;
}
/* Fundo leve “dados em movimento” (s4) */
.s4-data-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.s4-data-bg__grid{
  position:absolute;inset:-24%;
  opacity:.52;
  background:
    radial-gradient(ellipse 88% 68% at 8% 28%,rgba(14,165,233,.13) 0%,transparent 50%),
    radial-gradient(ellipse 78% 58% at 94% 62%,rgba(124,58,237,.11) 0%,transparent 48%),
    radial-gradient(ellipse 52% 44% at 48% 88%,rgba(34,211,238,.08) 0%,transparent 52%),
    radial-gradient(ellipse 40% 36% at 55% 12%,rgba(99,102,241,.06) 0%,transparent 46%);
  animation:s4-grid-shift 32s ease-in-out infinite;
}
@keyframes s4-grid-shift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2.5%,1.5%) scale(1.03)}
  100%{transform:translate(0,0) scale(1)}
}
.s4-data-bg__scan{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(125,211,252,.12) 50%,transparent 58%);
  background-size:180% 100%;
  animation:s4-scan 9s ease-in-out infinite;
  opacity:.5;
}
@keyframes s4-scan{
  0%{background-position:120% 0}
  100%{background-position:-80% 0}
}
#s4 .pilar-grid{position:relative;z-index:1}
#s4 .s4-data-bg__grid{
  opacity:.72;
  background:
    radial-gradient(ellipse 90% 70% at 12% 25%,rgba(124,58,237,.22) 0%,transparent 50%),
    radial-gradient(ellipse 80% 58% at 92% 58%,rgba(34,211,238,.14) 0%,transparent 48%),
    radial-gradient(ellipse 55% 42% at 48% 88%,rgba(167,139,250,.16) 0%,transparent 52%),
    radial-gradient(ellipse 38% 34% at 55% 10%,rgba(192,132,252,.12) 0%,transparent 46%);
}
#s4 .s4-data-bg__scan{opacity:.38}
.s4-glass__hint{
  display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px 14px;
  border-radius:12px;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.16);
  font-size:.8125rem;line-height:1.55;color:#164e63;
}
.s4-glass__badge{
  align-self:flex-start;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:#0e7490;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.82);border:1px solid rgba(14,165,233,.28);
}
#s4 .s4-glass__hint{
  background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.22);
  color:#a5f3fc;
}
#s4 .s4-glass__badge{
  color:#e0f2fe;background:rgba(124,58,237,.35);border-color:rgba(125,211,252,.35);
}
/* Evita o cartão branco esticar com a altura da coluna do pcard — cortava sensação de “subir/desce” ligada ao vizinho */
#s4-glass{align-self:start}
/* Diagrama de dados — tubos + rótulos */
.pcard__flow{
  display:flex;align-items:stretch;justify-content:space-between;gap:4px;margin:8px 0 6px;
  flex-wrap:nowrap;
}
.pcard__flow-node{
  display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 0;min-width:0;
}
.pcard__flow-node--db{flex:0 0 52px;min-width:52px;align-items:center;justify-content:center}
.pcard__box-k{
  display:block;font-size:7px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(91,33,182,.55);margin-bottom:4px;line-height:1.2;text-align:center;
}
.pcard__box{
  flex:unset;width:100%;min-width:0;text-align:center;padding:8px 6px 10px;border-radius:10px;
  border:1px dashed rgba(124,58,237,.38);
  background:#faf9ff;font-size:10px;font-weight:700;color:#5b21b6;
}
.pcard__box--etl{
  border-style:solid;border-color:rgba(124,58,237,.45);
  background:linear-gradient(180deg,#faf8ff,#f3efff);
  box-shadow:0 0 0 1px rgba(124,58,237,.06);
}
.pcard__pipe{
  flex:1;min-width:18px;max-width:72px;align-self:center;height:5px;margin-top:18px;
  border-radius:99px;background:rgba(124,58,237,.1);position:relative;overflow:hidden;
  border:1px solid rgba(124,58,237,.08);
}
.pcard__packet{
  position:absolute;left:0;top:0;bottom:0;width:42%;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.25),#7c3aed,rgba(124,58,237,.25),transparent);
  box-shadow:0 0 10px rgba(124,58,237,.35);
  animation:pcard-packet-move 2.4s ease-in-out infinite;
}
.pcard__packet--delay{animation-delay:1.15s}
@keyframes pcard-packet-move{
  0%{transform:translateX(-120%);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateX(280%);opacity:0}
}
.pcard__dash{display:none}
.pcard__cyl{
  width:40px;height:46px;border-radius:9px;
  background:linear-gradient(90deg,#ede9fe,#ddd6fe);
  border:1px solid #c4b5fd;position:relative;
  animation:pcard-db-breathe 3s ease-in-out infinite;
  box-shadow:0 4px 16px rgba(124,58,237,.12);
}
.pcard__cyl::after{content:'';position:absolute;left:5px;right:5px;top:7px;height:9px;border-radius:50%;background:#e9d5ff;opacity:.85}
@keyframes pcard-db-breathe{
  0%,100%{box-shadow:0 4px 16px rgba(124,58,237,.12);filter:brightness(1)}
  50%{box-shadow:0 4px 22px rgba(124,58,237,.28);filter:brightness(1.04)}
}
.pcard__db-lbl{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:#7c3aed;font-weight:700;margin-top:2px;
}
.pcard__flow-help{
  font-size:10px;line-height:1.45;color:#5c5866;margin:0 0 14px;padding:8px 10px;
  border-radius:10px;background:rgba(14,165,233,.06);border:1px solid rgba(14,165,233,.12);
}
#s5.scene--pilar{
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  color:#e8e4f7;
  background:radial-gradient(ellipse 115% 85% at 65% 0%,#1a0f32 0%,#0a0616 48%,#020308 100%);
}
#s5.scene--pilar::-webkit-scrollbar{width:0;height:0}
/* Fundo “pipeline / deploy” — malha, fluxo e pacotes (s5) */
.s5-deploy-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.s5-deploy-bg__mesh{
  position:absolute;inset:-26%;
  opacity:.64;
  background:
    radial-gradient(ellipse 76% 58% at 20% 26%,rgba(124,58,237,.16) 0%,transparent 48%),
    radial-gradient(ellipse 68% 52% at 86% 58%,rgba(56,189,248,.09) 0%,transparent 45%),
    radial-gradient(ellipse 46% 40% at 50% 84%,rgba(192,132,252,.1) 0%,transparent 42%),
    conic-gradient(from 200deg at 68% 32%,rgba(124,58,237,.045),transparent 32%,rgba(167,139,250,.055),transparent 68%);
  animation:s5-mesh-drift 38s linear infinite;
}
@keyframes s5-mesh-drift{
  0%{transform:translate(0,0) rotate(0)}
  100%{transform:translate(-5%,-4%) rotate(-1.5deg)}
}
.s5-deploy-bg__nodes{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 35%,rgba(124,58,237,.14) 0%,transparent 42%),
    radial-gradient(circle at 82% 60%,rgba(56,189,248,.1) 0%,transparent 38%),
    radial-gradient(circle at 50% 88%,rgba(167,139,250,.12) 0%,transparent 45%);
  animation:s5-nodes-pulse 14s ease-in-out infinite alternate;
}
@keyframes s5-nodes-pulse{
  0%{opacity:.7;transform:scale(1)}
  100%{opacity:1;transform:scale(1.04)}
}
.s5-deploy-bg__flow{
  position:absolute;inset:-25%;
  background:linear-gradient(
    98deg,
    transparent 38%,
    rgba(124,58,237,.045) 46%,
    rgba(167,139,250,.09) 50%,
    rgba(124,58,237,.045) 54%,
    transparent 62%
  );
  background-size:300% 300%;
  animation:s5-flow-slide 22s ease-in-out infinite;
  mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);
  opacity:.78;
}
@keyframes s5-flow-slide{
  0%{background-position:88% 38%}
  50%{background-position:12% 62%}
  100%{background-position:88% 38%}
}
.s5-deploy-bg__packets{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg,transparent 40%,rgba(196,181,253,.22) 50%,transparent 60%);
  background-size:200% 100%;
  animation:s5-packets 7s ease-in-out infinite;
  opacity:.35;
}
@keyframes s5-packets{
  0%{background-position:120% 0}
  100%{background-position:-80% 0}
}
#s5 .pilar-grid{
  position:relative;z-index:1;
  align-items:stretch;
}
#s5 .pilar-grid.p5-3col{
  direction:ltr;
  grid-template-columns:minmax(0,12.5rem) minmax(0,1fr) minmax(0,min(408px,40vw));
  gap:clamp(14px,2.2vw,22px);
  width:100%;
  max-width:min(1200px,100%);
  margin-left:auto;
  margin-right:auto;
}
#s5 .p5-rail{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  align-self:stretch;
}
/* Rail: HUD (regiões, barra, chips) + stream de eventos */
.p5-rail-hud{
  flex-shrink:0;
  padding:10px 11px 11px;
  border-radius:14px;
  border:1px solid rgba(139,92,246,.22);
  background:linear-gradient(160deg,rgba(124,58,237,.12) 0%,rgba(10,8,16,.94) 100%);
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
}
.p5-hud-regions{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.p5-hud-pill{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;border:1px solid rgba(139,92,246,.2);
  color:#94a3b8;background:rgba(0,0,0,.22);
  transition:color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.p5-hud-pill--on{
  color:#86efac;border-color:rgba(34,197,94,.38);
  box-shadow:0 0 12px rgba(34,197,94,.18);
  animation:p5-hud-breathe 4s ease-in-out infinite;
}
@keyframes p5-hud-breathe{
  0%,100%{box-shadow:0 0 8px rgba(34,197,94,.12)}
  50%{box-shadow:0 0 18px rgba(34,197,94,.28)}
}
.p5-hud-meter{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.p5-hud-meter__k{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#64748b;
  flex:1 0 100%;
}
.p5-hud-meter__bar{
  flex:1;min-width:0;height:5px;border-radius:999px;background:rgba(124,58,237,.15);
  border:1px solid rgba(139,92,246,.18);overflow:hidden;position:relative;
}
.p5-hud-meter__bar::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--p5-load,.42)*100%);
  border-radius:999px;background:linear-gradient(90deg,#38bdf8,#a78bfa);
  box-shadow:0 0 10px rgba(167,139,250,.45);
  transition:width .5s ease;
}
.p5-hud-meter__v{
  font-family:var(--font-mono);font-size:10px;font-weight:600;color:#c4b5fd;min-width:2.9em;text-align:right;
}
.p5-hud-chips{display:flex;flex-wrap:wrap;gap:5px}
.p5-hud-chip{
  font-family:var(--font-mono);font-size:7px;font-weight:600;letter-spacing:.04em;
  padding:3px 6px;border-radius:5px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.22);color:#7dd3fc;
}
.p5-hud-chip--pulse{
  animation:p5-chip-flicker 3.2s ease-in-out infinite;
}
@keyframes p5-chip-flicker{
  0%,100%{opacity:1;border-color:rgba(167,139,250,.28)}
  50%{opacity:.75;border-color:rgba(196,181,253,.48);box-shadow:0 0 8px rgba(139,92,246,.22)}
}
.p5-rail-stream{
  flex:1;
  min-height:92px;
  max-height:min(220px,30vh);
  margin-top:2px;
  border-radius:12px;border:1px solid rgba(139,92,246,.18);
  background:rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(180deg,transparent,black 10%,black 90%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,black 10%,black 90%,transparent);
}
.p5-rail-stream__track{
  display:flex;flex-direction:column;
  animation:p5-stream-scroll 26s linear infinite;
}
@keyframes p5-stream-scroll{
  0%{transform:translateY(0)}
  100%{transform:translateY(-50%)}
}
.p5-rail-stream__seg{
  display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px;
}
.p5-rail-stream__seg span{
  font-family:var(--font-mono);font-size:8px;line-height:1.35;color:#9b92b8;
  border-left:2px solid rgba(124,58,237,.38);padding-left:8px;
}
/* Coluna direita: faixa métricas + orbita decorativa */
#s5 .p5-visual-row{
  display:flex;gap:clamp(10px,1.8vw,14px);align-items:stretch;min-width:0;
}
#s5 .p5-visual-main{flex:1;min-width:0;display:flex;flex-direction:column}
#s5 .p5-visual-side{
  flex:0 0 52px;display:flex;align-items:center;justify-content:center;
  padding:4px 0;
}
.p5-orbit{
  display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:48px;
}
.p5-orbit__ring{
  width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(139,92,246,.22);
  border-top-color:#c4b5fd;border-right-color:rgba(56,189,248,.5);
  animation:p5-orbit-spin 12s linear infinite;
  box-shadow:0 0 20px rgba(124,58,237,.18),inset 0 0 12px rgba(124,58,237,.08);
}
@keyframes p5-orbit-spin{
  to{transform:rotate(360deg)}
}
.p5-orbit__ladder{display:flex;flex-direction:column;gap:5px;align-items:center}
.p5-orbit__ladder i{
  display:block;width:4px;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#38bdf8,#7c3aed);
  opacity:.55;
  animation:p5-ladder-wave 2.2s ease-in-out infinite;
}
.p5-orbit__ladder i:nth-child(2){animation-delay:.12s}
.p5-orbit__ladder i:nth-child(3){animation-delay:.24s}
.p5-orbit__ladder i:nth-child(4){animation-delay:.36s}
.p5-orbit__ladder i:nth-child(5){animation-delay:.48s}
@keyframes p5-ladder-wave{
  0%,100%{opacity:.38;transform:scaleY(.88)}
  50%{opacity:1;transform:scaleY(1.12);box-shadow:0 0 8px rgba(167,139,250,.45)}
}
.p5-orbit__label{
  font-family:var(--font-mono);font-size:6px;letter-spacing:.14em;text-transform:uppercase;color:#64748b;
}
.p5-visual-top{margin-bottom:2px;flex-shrink:0}
.p5-live-strip{
  border-radius:12px;border:1px solid rgba(139,92,246,.2);
  background:rgba(18,12,28,.78);
  overflow:hidden;height:34px;display:flex;align-items:center;
  box-shadow:inset 0 0 24px rgba(124,58,237,.07);
}
.p5-live-strip__track{
  display:flex;width:max-content;
  animation:p5-strip-marquee 20s linear infinite;
}
@keyframes p5-strip-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.p5-live-strip__inner{
  display:flex;align-items:center;gap:clamp(18px,3.5vw,32px);
  white-space:nowrap;padding:0 16px;
  font-family:var(--font-mono);font-size:9px;color:#94a3b8;
}
.p5-live-strip__inner strong{color:#ddd6fe;font-weight:600}
.p5-mini{
  flex-shrink:0;
  padding:12px 14px 13px;
  border-radius:14px;
  border:1px solid rgba(139,92,246,.28);
  background:linear-gradient(145deg,rgba(18,12,28,.94) 0%,rgba(10,8,16,.98) 100%);
  box-shadow:0 12px 36px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03) inset;
  border-left:3px solid rgba(167,139,250,.5);
  cursor:default;
  transition:border-color .25s ease,box-shadow .3s ease,transform .2s ease;
}
.p5-mini:hover{
  border-color:rgba(196,181,253,.38);
  box-shadow:0 16px 44px rgba(124,58,237,.22),0 0 0 1px rgba(255,255,255,.05) inset;
}
.p5-mini__k{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;margin-bottom:8px;
}
.p5-mini__v{
  font-size:clamp(1.12rem,2.3vw,1.32rem);font-weight:700;color:#f5f3ff;
  letter-spacing:-.02em;line-height:1.1;
}
.p5-mini__v--mono{font-family:var(--font-mono);font-size:clamp(.95rem,2vw,1.05rem);color:#c4b5fd}
.p5-mini__slash{opacity:.42;font-weight:500;margin:0 .06em}
.p5-mini__m{margin-top:8px;font-size:10px;line-height:1.45;color:#9b92b8}
.p5-mini--ok{border-left-color:rgba(34,197,94,.55)}
.p5-mini--ok .p5-mini__v{color:#86efac}
@media (max-width:1024px){
  #s5 .pilar-grid.p5-3col{
    grid-template-columns:1fr;
  }
  #s5 .p5-visual-side{display:none}
  #s5 .p5-visual-row{gap:0}
  #s5 .p5-rail{
    flex-direction:row;flex-wrap:wrap;
  }
  #s5 .p5-rail .p5-rail-hud{flex:1 1 100%;order:-1}
  #s5 .p5-rail .p5-rail-stream{flex:1 1 100%;order:4;max-height:min(140px,24vh);min-height:72px}
  #s5 .p5-mini{flex:1 1 calc(33.333% - 8px);min-width:min(100%,158px)}
}
@media (max-width:520px){
  #s5 .p5-rail{flex-direction:column}
  #s5 .p5-mini{flex:1 1 auto;min-width:0}
}
#s5 .pilar-visual{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2vw,16px);
  min-height:100%;
}
#s5 .pdash-foot{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:clamp(120px,18vh,200px);
}
#s5 .pdash-feed{
  border-radius:14px;
  border:1px solid rgba(139,92,246,.2);
  background:linear-gradient(145deg,rgba(18,12,28,.92) 0%,rgba(10,8,16,.96) 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.32);
  padding:14px 16px 12px;
  border-left:3px solid rgba(167,139,250,.45);
}
#s5 .pdash-feed__head{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;margin-bottom:12px;
}
#s5 .pdash-feed__list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
}
#s5 .pdash-feed__list li{
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--font-mono);font-size:10px;line-height:1.45;color:#c4b5fd;
}
#s5 .pdash-feed__list li span:last-child{color:#d4cfe0}
#s5 .pdash-feed__dot{
  flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:4px;
  box-shadow:0 0 10px currentColor;
}
#s5 .pdash-feed__dot--ok{background:#22c55e;color:rgba(34,197,94,.6)}
#s5 .pdash-feed__dot--run{background:#fde047;color:rgba(253,224,71,.5)}
#s5 .pdash-feed__dot--idle{background:#64748b;color:rgba(100,116,139,.45)}
#s5 .pdash-feed__tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(124,58,237,.12);
}
#s5 .pdash-feed__tags span{
  font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:.04em;
  padding:5px 9px;border-radius:6px;
  background:rgba(124,58,237,.12);border:1px solid rgba(139,92,246,.22);
  color:#c4b5fd;
}
/* Cartão explicativo deploy — mais vivo */
.p5-glass__hint{
  display:flex;flex-direction:column;gap:8px;margin-bottom:18px;padding:12px 14px;
  border-radius:12px;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.14);
  font-size:.8125rem;line-height:1.5;color:#4c1d95;
}
.p5-glass__badge{
  align-self:flex-start;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:#7c3aed;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.7);border:1px solid rgba(124,58,237,.2);
}
.p5-pipeline{margin-bottom:20px}
.p5-pipeline__track{
  height:5px;border-radius:999px;background:rgba(124,58,237,.12);position:relative;overflow:hidden;
  border:1px solid rgba(124,58,237,.1);
}
.p5-pipeline__glow{
  position:absolute;top:0;bottom:0;width:min(38%,120px);left:-20%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.75),rgba(192,132,252,.9),rgba(124,58,237,.75),transparent);
  box-shadow:0 0 18px rgba(124,58,237,.35);
  animation:p5-pipe-glow 3.8s ease-in-out infinite;
}
@keyframes p5-pipe-glow{
  0%,100%{left:-20%;opacity:.5}
  50%{left:100%;opacity:1}
}
.p5-pipeline__labels{
  display:flex;justify-content:space-between;margin-top:8px;font-family:var(--font-mono);font-size:8px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(91,33,182,.55);
}
#s5 .p5-checklist li{
  position:relative;cursor:pointer;border-radius:10px;padding:10px 10px 10px 8px;margin:6px 0;
  transition:background .3s ease,box-shadow .35s ease,transform .25s ease;
  list-style:none;
}
#s5 .p5-checklist li::before{margin-top:.4em}
#s5 .p5-checklist li:hover{
  background:rgba(124,58,237,.06);box-shadow:0 4px 20px rgba(124,58,237,.08);
  transform:translateX(4px);
}
#s5 .p5-checklist li.is-done{
  background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18);
}
#s5 .p5-checklist li.is-done::before{
  background:#22c55e!important;box-shadow:0 0 12px rgba(34,197,94,.35);
}
#s5 .p5-checklist li:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
#s5 .p5-checklist{gap:10px}
#s5 .p5-checklist li{margin:0}
.p5-tap-hint{font-family:var(--font-mono);font-size:9px;color:rgba(91,33,182,.55);margin-bottom:10px}
#p5-glass{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}
.p5-glass__foot{
  margin-top:auto;
  padding-top:clamp(16px,2.5vh,22px);
  border-top:1px solid rgba(124,58,237,.14);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.5vw,12px);
}
.p5-glass__stat{
  text-align:center;padding:12px 8px;border-radius:12px;
  background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.12);
}
.p5-glass__stat-k{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:#7c3aed;font-weight:700;margin-bottom:6px;
}
.p5-glass__stat-v{font-size:clamp(.95rem,2.2vw,1.05rem);font-weight:600;color:#0f0d14;letter-spacing:-.02em;line-height:1.15}
.p5-glass__stat-s{font-size:10px;color:#5c5866;margin-top:4px;line-height:1.35}
@media (max-width:640px){
  .p5-glass__foot{grid-template-columns:1fr}
}
.pdash-val{font-variant-numeric:tabular-nums;transition:color .2s ease}
@media (prefers-reduced-motion:reduce){
  .s5-deploy-bg__mesh,.s5-deploy-bg__nodes,.s5-deploy-bg__flow,.s5-deploy-bg__packets,.p5-pipeline__glow{animation:none!important}
  .s5-deploy-bg__packets{opacity:.2}
  .p5-hud-pill--on,.p5-hud-chip--pulse,.p5-rail-stream__track,.p5-live-strip__track,.p5-orbit__ring,.p5-orbit__ladder i{animation:none!important}
  .p5-hud-pill--on{box-shadow:0 0 10px rgba(34,197,94,.15)}
}
#s5 .p5-glass__hint{
  background:rgba(124,58,237,.12);
  border-color:rgba(167,139,250,.28);
  color:#ddd6fe;
}
#s5 .p5-glass__badge{
  color:#faf8ff;
  background:rgba(124,58,237,.42);
  border-color:rgba(196,181,253,.35);
}
#s5 .p5-pipeline__track{background:rgba(124,58,237,.16);border-color:rgba(167,139,250,.2)}
#s5 .p5-pipeline__labels{color:rgba(196,181,253,.68)}
#s5 .p5-tap-hint{color:rgba(196,181,253,.52)}
#s5 .p5-glass__foot{border-top-color:rgba(167,139,250,.24)}
#s5 .p5-glass__stat{background:rgba(124,58,237,.1);border-color:rgba(139,92,246,.24)}
#s5 .p5-glass__stat-k{color:#c4b5fd}
#s5 .p5-glass__stat-v{color:#faf8ff}
#s5 .p5-glass__stat-s{color:#9b92b8}
#s5 .p5-checklist li:hover{background:rgba(124,58,237,.12);box-shadow:0 4px 24px rgba(124,58,237,.14)}
#s5 .s5-deploy-bg__mesh{opacity:.5}
#s5 .s5-deploy-bg__nodes{opacity:.85}
.pilar-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
  justify-items:stretch;
  width:100%;
  max-width:min(1120px,100%);
  min-height:0;
  min-width:0;
  margin:0 auto;
  box-sizing:border-box;
}
.pilar-grid > *{min-width:0}
.pilar-visual{
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}
.pilar-visual > .pwin,.pilar-visual > .pcard,.pilar-visual > .pdash,.pilar-visual > .pdash-foot{width:100%;max-width:100%}
.pilar-visual > .pwin,.pilar-visual > .pcard,.pilar-visual > .pdash{flex-shrink:0}
.pilar-grid--rev{direction:rtl}
.pilar-grid--rev > *{direction:ltr}
.pilar-glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(124,58,237,.12);
  border-radius:20px;
  padding:clamp(24px,3vw,36px);
  box-shadow:0 24px 60px rgba(91,33,182,.08),0 0 0 1px rgba(255,255,255,.6) inset;
}
.pilar-kicker{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7c3aed;
  margin-bottom:14px;
  font-weight:600;
}
.pilar-glass h2{
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  color:#0f0d14;
  margin-bottom:16px;
}
.pilar-glass > p{
  font-size:.9375rem;
  line-height:1.7;
  color:#5c5866;
  margin-bottom:22px;
}
.pilar-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pilar-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.875rem;
  line-height:1.55;
  color:#3d3a48;
}
.pilar-list li::before{
  content:'';
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-top:.45em;
  background:#8b5cf6;
  border-radius:1px;
}
/* Janela escura tipo macOS */
.pwin{
  background:linear-gradient(180deg,#14121c 0%,#0c0a12 100%);
  border:1px solid rgba(124,58,237,.22);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(30,20,60,.35),0 0 0 1px rgba(255,255,255,.04) inset;
  max-width:100%;
}
.pwin__top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 14px;
  background:rgba(124,58,237,.08);
  border-bottom:1px solid rgba(124,58,237,.12);
}
.pwin__top .pwin__title{flex:1 1 120px;min-width:0}
.pwin__dot{width:10px;height:10px;border-radius:50%}
.pwin__title{flex:1;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:#9b92b0;text-transform:uppercase}
.pwin__body{padding:18px 16px 20px;font-size:11px;color:#c4bdd4}
.pwin__pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:100px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
}
.pwin__pill--ok{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.35)}
.pflow{display:flex;align-items:stretch;justify-content:space-between;gap:8px;margin:18px 0;flex-wrap:wrap}
.pflow__node{
  flex:1;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(139,92,246,.35);
  border-radius:10px;
  padding:10px 8px;
  text-align:center;
}
.pflow__node small{display:block;font-size:8px;color:#a78bfa;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pflow__node strong{display:block;font-size:11px;color:#f5f3ff;font-weight:600}
.pflow__node span{font-size:9px;color:#8b8598;line-height:1.3}
.pflow__arrow{flex:0 0 12px;align-self:center;color:#6d28d9;font-size:14px;opacity:.7}
#s2 .pilar-glass,#s2 .pwin{transition:box-shadow .35s ease,border-color .35s ease}
#s2 .pilar-glass:hover{box-shadow:0 32px 78px rgba(91,33,182,.13),0 0 0 1px rgba(255,255,255,.65) inset;border-color:rgba(124,58,237,.22)}
#s2 .pwin:hover{box-shadow:0 40px 96px rgba(30,20,60,.48),0 0 0 1px rgba(255,255,255,.06) inset;border-color:rgba(139,92,246,.35)}
#s2 .pwin .pwin__pill--ok{animation:pilar01-pill 2.2s ease-in-out infinite}
@keyframes pilar01-pill{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.2)}
  50%{opacity:.9;box-shadow:0 0 0 4px rgba(34,197,94,.1)}
}
#s2 .api-row{position:relative;overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s}
#s2 .api-row:hover{border-color:rgba(139,92,246,.35);box-shadow:0 0 14px rgba(124,58,237,.1)}
@media (prefers-reduced-motion:reduce){
  #s2 .pwin .pwin__pill--ok{animation:none}
}
.api-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin-top:8px;
  background:rgba(0,0,0,.35);
  border-radius:8px;
  border:1px solid rgba(124,58,237,.15);
}
.api-tag{font-family:var(--font-mono);font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;background:#7c3aed;color:#fff}
.api-path{font-family:var(--font-mono);font-size:10px;color:#e9e4f5;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwin__foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(124,58,237,.12);font-family:var(--font-mono);font-size:9px;color:#8b8598}
.pwin__foot b{color:#a78bfa;font-weight:600}
/* Mock app reviewtech.dev */
.mock-url{font-family:var(--font-mono);font-size:9px;color:#6b6578;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.mock-live{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:4px;background:rgba(34,197,94,.2);color:#4ade80;font-size:9px;font-weight:700;margin-bottom:8px}
.mock-h{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}
.mock-sub{font-size:11px;color:#9b92b0;line-height:1.45;margin-bottom:12px}
.mock-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mock-pill{font-size:9px;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.06);color:#b8b0c8;border:1px solid rgba(255,255,255,.08);transition:border-color .25s,background .25s,box-shadow .25s}
#s3 .mock-pill:hover{border-color:rgba(139,92,246,.4);background:rgba(124,58,237,.12);box-shadow:0 0 16px rgba(124,58,237,.12)}
#s3 .pilar-glass,#s3 .pwin{transition:box-shadow .35s ease,border-color .35s ease}
#s3 .pilar-glass:hover{box-shadow:0 32px 88px rgba(124,58,237,.26),0 0 0 1px rgba(255,255,255,.09) inset;border-color:rgba(196,181,253,.35)}
#s5 .pilar-glass:hover{box-shadow:0 32px 88px rgba(124,58,237,.26),0 0 0 1px rgba(255,255,255,.09) inset;border-color:rgba(196,181,253,.35)}
#s3 .pwin:hover{box-shadow:0 40px 96px rgba(30,20,60,.48),0 0 0 1px rgba(255,255,255,.06) inset;border-color:rgba(139,92,246,.35)}
#s3 .mock-live{animation:mock-live-glow 2.2s ease-in-out infinite}
@keyframes mock-live-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.15);filter:brightness(1)}
  50%{box-shadow:0 0 18px rgba(34,197,94,.22);filter:brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){
  #s3 .mock-live{animation:none}
  .s3-ui-bg__mesh,.s3-ui-bg__bloom,.s3-ui-bg__sweep,.s3-ui-bg__scan,.s3-ui-bg__dots{animation:none!important}
  .s3-ui-bg__bloom{opacity:.85;transform:none}
  .s3-ui-bg__sweep{opacity:.25}
}
.mock-li{display:flex;align-items:center;gap:8px;font-size:10px;margin:6px 0;color:#d4cfe0}
.mock-li i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mock-li i.g{background:#22c55e}.mock-li i.y{background:#eab308}
.mock-run{background:rgba(0,0,0,.45);border-radius:10px;padding:12px;margin-top:12px;border:1px solid rgba(124,58,237,.2)}
.mock-run-h{font-size:9px;color:#8b5cf6;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.mock-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mock-m{font-size:9px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.05);color:#a8a0b8;border:1px solid rgba(255,255,255,.08)}
.mock-m strong{color:#e9e4f5}
#rt-m-lcp,#rt-m-cls{display:inline-block;min-width:3.5ch;font-variant-numeric:tabular-nums;text-align:right}
#rt-m-a11y{display:inline-block;min-width:2.5ch;font-variant-numeric:tabular-nums;text-align:center}
#rt-m-routes{display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums;text-align:right}
#rt-m-build{font-variant-numeric:tabular-nums}
/* Card branco dados */
.pcard{
  background:#fff;
  border-radius:20px;
  padding:20px 20px 22px;
  box-shadow:0 28px 70px rgba(91,33,182,.12),0 0 0 1px rgba(124,58,237,.08);
  border:1px solid rgba(237,233,254,.9);
  contain:layout style;
}
.pcard__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pcard__brand{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:#7c3aed;text-transform:uppercase;font-weight:600}
.pcard-vol{font-family:var(--font-mono);font-size:9px;color:#7c3aed;text-transform:uppercase;letter-spacing:.08em;margin:12px 0 8px}
/* Volume: curva de área (visual distinto das barras genéricas) */
.pcard-volviz{
  height:56px;margin:4px 0 2px;padding:4px 2px 0;border-radius:10px;
  background:linear-gradient(180deg,rgba(124,58,237,.06),transparent);
  border:1px solid rgba(124,58,237,.12);
}
.pcard-volviz__svg{display:block;width:100%;height:34px}
.pcard-volviz__line{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:pcard-volviz-draw 4.2s ease-out forwards;
}
.pcard-volviz__dot{
  opacity:0;animation:pcard-volviz-dot 0.5s ease-out 3.6s forwards;
}
@keyframes pcard-volviz-draw{
  to{stroke-dashoffset:0}
}
@keyframes pcard-volviz-dot{
  to{opacity:1}
}
.pcard-volviz__ticks{
  display:flex;justify-content:space-between;padding:2px 2px 0;
  font-family:var(--font-mono);font-size:7px;letter-spacing:.04em;color:#94a3b8;text-transform:uppercase;
}
.pcard-rows{margin-top:10px}
.pcard-row{
  display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 12px;border-radius:8px;background:#f8f7fc;margin-top:6px;font-size:10px;color:#3d3a48;
  position:relative;overflow:hidden;
}
.pcard-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#7c3aed,#38bdf8);opacity:0;transform:scaleY(0);
  transform-origin:50% 100%;
  transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.pcard-row.is-line-in::before{opacity:1;transform:scaleY(1)}
.pcard-row code{font-family:var(--font-mono);color:#7c3aed;font-weight:600}
.pcard-row .ok{color:#16a34a;font-weight:600}
/* Rodapé do cartão de dados: métricas em chiclets (evita repetir o gráfico de barras acima) */
.pcard-signals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #ede9fe;
}
.pcard-signal{
  text-align:center;
  padding:9px 6px 10px;
  border-radius:10px;
  background:linear-gradient(160deg,rgba(124,58,237,.14) 0%,rgba(22,18,38,.95) 100%);
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
}
.pcard-signal__k{
  display:block;font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:#a78bfa;font-weight:600;margin-bottom:5px;line-height:1.2;
}
.pcard-signal__v{
  display:block;font-size:11px;font-weight:600;color:#f5f3ff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
#s4 .pilar-glass,#s4 .pcard{transition:box-shadow .35s ease,border-color .35s ease}
#s4 .pilar-glass:hover{box-shadow:0 32px 88px rgba(124,58,237,.28),0 0 0 1px rgba(196,181,253,.12) inset;border-color:rgba(167,139,250,.4)}
#s4 .pcard:hover{box-shadow:0 36px 96px rgba(124,58,237,.35),0 0 0 1px rgba(167,139,250,.2)}
#s4 .pcard{
  background:rgba(12,8,22,.92);
  border:1px solid rgba(167,139,250,.32);
  box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 40px rgba(124,58,237,.12);
}
#s4 .pcard__brand{color:#c4b5fd}
#s4 .pcard__box-k{color:rgba(196,181,253,.75)}
#s4 .pcard__box{
  background:rgba(30,22,52,.95);
  border-color:rgba(167,139,250,.45);
  color:#ede9fe;
}
#s4 .pcard__box--etl{
  background:linear-gradient(180deg,rgba(40,28,72,.95),rgba(28,20,52,.98));
  border-color:rgba(192,132,252,.5);
  box-shadow:0 0 24px rgba(124,58,237,.15);
}
#s4 .pcard__pipe{background:rgba(124,58,237,.18);border-color:rgba(167,139,250,.2)}
#s4 .pcard__cyl{
  background:linear-gradient(90deg,#3b2a5c,#2a1f48);
  border-color:#a78bfa;
  box-shadow:0 4px 20px rgba(124,58,237,.25);
}
#s4 .pcard__cyl::after{background:#6d28d9;opacity:.75}
#s4 .pcard__db-lbl{color:#c4b5fd}
#s4 .pcard__flow-help{color:#a8a0c4;background:rgba(124,58,237,.08);border-color:rgba(139,92,246,.2)}
#s4 .pcard-vol{color:#c4b5fd}
#s4 .pcard-row{background:rgba(22,16,40,.9);color:#d4cfe8;border:1px solid rgba(124,58,237,.15)}
#s4 .pcard-row code{color:#e9d5ff}
#s4 .pcard-signals{border-top-color:rgba(124,58,237,.25)}
#s4 .pcard-signal{border-color:rgba(139,92,246,.35);background:linear-gradient(160deg,rgba(124,58,237,.2) 0%,rgba(10,8,18,.92) 100%)}
#s4 .pcard-signal__k{color:#c4b5fd}
#s4 .pcard-signal__v{color:#faf5ff}
#s4 .pcard .pwin__pill--ok{animation:pcard-sync-pulse 2.3s ease-in-out infinite}
@keyframes pcard-sync-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.25)}
  50%{opacity:.92;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
}
@media (prefers-reduced-motion:reduce){
  #s4 .pcard .pwin__pill--ok{animation:none}
  .pcard-volviz__line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .pcard-volviz__dot{opacity:1;animation:none}
  .pdash-graph::after{animation:none;opacity:0}
  .s4-data-bg__grid,.s4-data-bg__scan,.pcard__packet,.pcard__cyl{animation:none!important}
  .pcard__cyl{box-shadow:0 4px 16px rgba(124,58,237,.12);filter:none!important}
}
/* Card escuro saúde / deploy */
.pdash{
  background:linear-gradient(165deg,#16131f 0%,#0d0b12 100%);
  border-radius:20px;
  padding:20px;
  border:1px solid rgba(124,58,237,.25);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
}
.pdash__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pdash__ok{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#fff}
.pdash__ok i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.5)}
.pdash__meta{font-family:var(--font-mono);font-size:9px;color:#6b6578}
.pdash-graph{height:64px;margin:12px 0;border-radius:10px;background:rgba(124,58,237,.08);position:relative;overflow:hidden;border:1px solid rgba(124,58,237,.15)}
.pdash-graph::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(105deg,transparent 0%,rgba(167,139,250,.12) 45%,rgba(196,181,253,.18) 50%,rgba(167,139,250,.12) 55%,transparent 100%);
  background-size:220% 100%;
  animation:rt-pdash-sweep 5s ease-in-out infinite;
  opacity:.85;
}
@keyframes rt-pdash-sweep{
  0%{background-position:100% 50%}
  100%{background-position:-120% 50%}
}
.pdash-graph::before{
  content:'';
  position:absolute;left:8px;right:8px;top:50%;
  margin-top:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent,#a78bfa 20%,#c4b5fd 50%,#a78bfa 80%,transparent);
  border-radius:2px;
  box-shadow:0 0 16px rgba(139,92,246,.6);
  transform-origin:50% 50%;
  animation:pdash-glow 2.4s ease-in-out infinite;
}
@keyframes pdash-glow{
  0%,100%{opacity:.88;transform:scaleX(1);filter:brightness(1)}
  50%{opacity:1;transform:scaleX(1.06);filter:brightness(1.25)}
}
.pdash__ok i{animation:pdash-dot 2s ease-in-out infinite}
@keyframes pdash-dot{
  0%,100%{box-shadow:0 0 12px rgba(34,197,94,.5);opacity:1}
  50%{box-shadow:0 0 20px rgba(74,222,128,.9);opacity:.88}
}
@media (prefers-reduced-motion:reduce){
  .pdash-graph::before,.pdash__ok i{animation:none}
}
.pdash-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.pdash-tile{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 8px;text-align:center;
  transition:border-color .25s,background .25s,box-shadow .25s;cursor:default
}
.pdash-tile:hover{
  border-color:rgba(139,92,246,.42);
  background:rgba(124,58,237,.12);
  box-shadow:0 0 26px rgba(124,58,237,.22)
}
.pdash-tile b{display:block;font-size:9px;color:#8b5cf6;text-transform:uppercase;margin-bottom:4px}
.pdash-tile span{font-size:10px;color:#d4cfe0;line-height:1.35}
.pdash-tile .pdash-val{display:inline-block;min-width:1.1em;text-align:center}
.pdash-term{margin-top:14px;font-family:var(--font-mono);font-size:10px;line-height:1.85;color:#9b92b0}
.pdash-term .g{color:#4ade80}

/* DATA — métricas + gráficos centrados no viewport (eixo H e V) */
#s6{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,min(520px,47vw)) minmax(0,min(520px,47vw)) 1fr;
  grid-template-rows:minmax(12px,1fr) auto minmax(12px,1fr);
  column-gap:clamp(20px,3vw,44px);
  align-items:stretch;
  align-content:stretch;
  /* .scene é flex + align-items:center: sem isto o bloco só tem altura do conteúdo e os 1fr não centralizam */
  align-self:stretch;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-height:100%;
  min-height:100dvh;
  padding:max(40px,calc(28px + env(safe-area-inset-top,0px))) clamp(16px,3vw,40px) max(40px,calc(28px + env(safe-area-inset-bottom,0px)));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(ellipse 120% 100% at 50% 0%,#0c1228 0%,#050810 55%,#000 100%);
}
#s6 > .s6-galaxy-bg{
  grid-column:1 / -1;
  grid-row:1 / -1;
}
#s6 > .dl{
  grid-column:2;
  grid-row:2;
}
#s6 > .dr{
  grid-column:3;
  grid-row:2;
}
#s6 .dl,#s6 .dr{position:relative;z-index:1;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
#s6.s6-flipping .s6-charts{opacity:.42;filter:blur(1px);transform:scale(.988);transition:opacity .38s ease,filter .38s ease,transform .45s cubic-bezier(.25,.8,.2,1)}
#s6.s6-flipping .mgrid{opacity:.88;transform:translateY(2px);transition:opacity .38s ease,transform .45s ease}
#s6:not(.s6-flipping) .s6-charts{opacity:1;filter:none;transform:none;transition:opacity .5s ease .05s,filter .45s ease .05s,transform .55s cubic-bezier(.22,1,.36,1) .05s}
#s6:not(.s6-flipping) .mgrid{opacity:1;transform:none;transition:opacity .5s ease .08s,transform .55s cubic-bezier(.22,1,.36,1) .08s}
.s6-compare{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.s6-compare__toggle{
  display:inline-flex;padding:3px;border-radius:999px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.15);
}
.s6-compare__btn{
  border:none;background:transparent;color:var(--muted);font-family:var(--font-sans);
  font-size:11px;font-weight:600;letter-spacing:.02em;padding:8px 16px;border-radius:999px;cursor:pointer;
  transition:color .35s ease,background .35s ease,box-shadow .35s ease,transform .2s ease;
}
.s6-compare__btn:hover{color:var(--white)}
.s6-compare__btn.is-active{
  background:rgba(124,58,237,.35);color:#fff;box-shadow:0 4px 20px rgba(124,58,237,.25);
}
.s6-compare__btn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.s6-charts{display:flex;flex-direction:column;gap:14px;flex-shrink:0;min-height:0}
@media (prefers-reduced-motion:reduce){
  #s6.s6-flipping .s6-charts,#s6.s6-flipping .mgrid{filter:none!important}
  #s6 .mc{transition:border-color .2s,background .2s}
  #s6 .mc:hover{transform:none;box-shadow:none}
}
#s6.s6-canary-view .mc{border-color:rgba(56,189,248,.22);background:rgba(56,189,248,.04)}
#s6.s6-canary-view .mc:hover{border-color:rgba(56,189,248,.38);background:rgba(56,189,248,.08)}
.dl{padding:clamp(32px,5vh,56px) clamp(20px,2.5vw,36px) clamp(32px,5vh,56px) clamp(20px,2.5vw,32px);border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;min-height:0;min-width:0}
.dr{padding:clamp(32px,5vh,56px) clamp(20px,2.5vw,32px) clamp(32px,5vh,56px) clamp(20px,2.5vw,36px);display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0;min-width:0}
.chart-wrap{position:relative;width:100%;height:140px;min-height:140px;flex-shrink:0}
/* Donut + legenda à direita — mais altura para não cortar bordas / legenda Chart.js */
.chart-wrap--sm{height:min(260px,42vh);min-height:232px}
#s6 .cb{flex-shrink:0;overflow:visible}
.chart-wrap canvas{max-height:100%!important}

.slabel{font-family:var(--font-mono);font-size:10px;color:var(--accent-soft);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.slabel::before{content:'';flex:0 0 24px;height:1px;background:var(--accent)}
.stitle{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:600;line-height:1.08;letter-spacing:-0.02em;margin-bottom:20px}
.stext{color:var(--muted);line-height:1.75;font-size:0.9375rem;font-weight:400}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.mc{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:20px;cursor:default;will-change:transform;
  transition:border-color .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mc:hover{border-color:rgba(139,92,246,.35);background:rgba(124,58,237,.08);transform:translateY(-3px);box-shadow:0 14px 40px rgba(124,58,237,.1)}
#s6 .mc:active{transform:translateY(-1px);transition-duration:.15s}
.mv{font-size:2.25rem;font-weight:600;letter-spacing:-0.02em;line-height:1;margin-bottom:4px;color:var(--accent-soft);transition:color .45s ease,transform .4s cubic-bezier(.34,1.56,.64,1);display:inline-block}
#s6.s6-canary-view .mv{color:#7dd3fc}
#s6.s6-canary-view .mv2{color:#a5f3fc}
.mv2{color:#a78bfa}
.mlb{font-size:11px;color:var(--muted);letter-spacing:0.02em;font-weight:500}
.mtr{font-family:var(--font-mono);font-size:9px;color:var(--accent);margin-top:8px;opacity:.9}

.cb{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .5s ease,box-shadow .55s ease}
#s6 .cb:hover{border-color:rgba(124,58,237,.28);box-shadow:0 10px 36px rgba(0,0,0,.2)}
.ct{font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-bottom:12px;letter-spacing:0.08em;text-transform:uppercase;transition:color .4s ease}
.ct .ct-shift{color:var(--accent-soft);font-weight:600}
.cb canvas{display:block}

/* Desenvolvimento — front + back (s11) — bloco centrado como outras cenas */
.scene--dev{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:max(52px,calc(40px + env(safe-area-inset-top,0px))) clamp(18px,4vw,48px) max(44px,calc(32px + env(safe-area-inset-bottom,0px)));
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.dev-wrap{
  position:relative;width:100%;max-width:min(1080px,100%);
  margin-left:auto;margin-right:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,48px);
  align-items:center;
  z-index:1;
  flex-shrink:0;
}
@media (max-width:920px){
  .dev-wrap{grid-template-columns:1fr}
}
.scene--dev .slabel{color:#7dd3fc}
.scene--dev .slabel::before{background:linear-gradient(90deg,#60a5fa,#a78bfa)}
.dev-feat{
  margin-top:18px;list-style:none;padding:0;
  display:flex;flex-direction:column;gap:10px;
  font-size:0.875rem;line-height:1.55;color:var(--muted);
}
.dev-feat li{position:relative;padding-left:18px}
.dev-feat li::before{
  content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  box-shadow:0 0 12px rgba(96,165,250,.35);
}
.dev-col--viz{position:relative}
.dev-pair{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(8px,1.5vw,14px);align-items:stretch;
  position:relative;z-index:1;
}
@media (max-width:640px){
  .dev-pair{grid-template-columns:1fr}
}
.dev-panel{
  border-radius:16px;border:1px solid rgba(125,211,252,.2);
  background:rgba(6,10,22,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:16px 18px;
  box-shadow:0 22px 56px rgba(0,0,0,.4);
  transition:border-color .35s,box-shadow .4s;
}
.dev-panel--fe{border-color:rgba(96,165,250,.32)}
.dev-panel--be{border-color:rgba(196,181,253,.28)}
.dev-panel__k{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin-bottom:12px;
}
.dev-panel--fe .dev-panel__k{color:#60a5fa}
.dev-panel--be .dev-panel__k{color:#c4b5fd}
.dev-code{
  font-family:var(--font-mono);font-size:10px;line-height:1.7;color:#94a3b8;min-height:7.5em;
}
.dev-code .kw{color:#7dd3fc}
.dev-code .fn{color:#a5b4fc}
.dev-code .st{color:#4ade80}
.dev-code .cm{color:#64748b}
.dev-line{display:block;opacity:1;transform:none;min-height:1.7em}
.dev-type-caret{
  display:inline-block;width:0.45em;margin-left:1px;
  color:var(--accent-soft);font-weight:600;vertical-align:text-bottom;
  animation:dev-type-caret-blink 1s steps(1,end) infinite;
}
@keyframes dev-type-caret-blink{
  0%,50%{opacity:1}
  50.01%,100%{opacity:0}
}
.dev-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dev-chip{
  font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:.04em;
  padding:5px 9px;border-radius:7px;
  border:1px solid rgba(125,211,252,.2);color:#bae6fd;background:rgba(96,165,250,.08);
  will-change:transform,opacity;
}
.dev-panel--be .dev-chip{border-color:rgba(196,181,253,.22);color:#e9d5ff;background:rgba(167,139,250,.08)}
.dev-bridge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-width:64px;padding:4px 2px;
}
.dev-bridge__beam{
  flex:1;width:4px;min-height:56px;border-radius:99px;
  background:linear-gradient(180deg,rgba(96,165,250,.22),rgba(167,139,250,.82),rgba(96,165,250,.22));
  box-shadow:0 0 14px rgba(167,139,250,.28);
}
.dev-bridge__lbl{
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#64748b;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
}
@media (max-width:640px){
  .dev-bridge{flex-direction:row;min-width:0;width:100%;min-height:44px;padding:8px 0}
  .dev-bridge__beam{
    flex:1;width:auto;min-width:48px;height:4px;min-height:4px;
    background:linear-gradient(90deg,rgba(96,165,250,.22),rgba(167,139,250,.82),rgba(96,165,250,.22));
  }
  .dev-bridge__lbl{writing-mode:horizontal-tb;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dev-type-caret{animation:none!important;opacity:.85}
}

/* s11: fundo global mais calmo (menos “estrelado”) enquanto a cena está ativa */
body.rt-dev-scene #bg-cosmos{opacity:0.18;transition:opacity 1s ease}
body.rt-dev-scene .bgmesh-flow{opacity:0.42}

/* DEV */
#s7{
  flex-direction:column;
  padding:88px clamp(20px,4vw,56px) 56px;
  align-items:center;
  justify-content:flex-start;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#s7 > .s2-inner{
  margin-top:auto;
  margin-bottom:auto;
  flex-shrink:0;
  width:100%;
  max-width:1040px;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.dh{display:flex;align-items:flex-end;justify-content:space-between;width:100%;max-width:1040px;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.dh__lead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dn{text-align:right;color:var(--muted);font-size:0.8125rem;line-height:1.75;font-weight:400}
.dsg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:1040px;margin-bottom:24px}
.ds{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:18px;cursor:default;transition:border-color .25s,transform .22s ease,box-shadow .22s ease}
.ds:hover{border-color:rgba(129,140,248,.35);transform:translateY(-2px)}
/* Entrega (s7): feedback ao toque — sem tilt de rato nos .ds para a animação de pressão funcionar */
#s7 .ds:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(124,58,237,.12)}
#s7 .ds:active{transform:translateY(-1px) scale(0.97);transition:transform .08s ease}
#s7 .dcb{cursor:pointer;transition:transform .2s ease,box-shadow .35s ease,border-color .35s ease}
#s7 .dcb:hover{box-shadow:0 12px 40px rgba(0,0,0,.22);border-color:rgba(139,92,246,.32)}
#s7 .dcb:active{transform:scale(0.992);transition:transform .08s ease}
@keyframes rt-tap-delivery{
  0%{transform:scale(1) translateY(0)}
  28%{transform:scale(0.94) translateY(4px)}
  60%{transform:scale(1.03) translateY(-3px)}
  100%{transform:scale(1) translateY(0)}
}
@keyframes rt-tap-delivery-wide{
  0%{transform:scale(1)}
  30%{transform:scale(0.985)}
  55%{transform:scale(1.008)}
  100%{transform:scale(1)}
}
#s7 .ds.rt-tap-active{animation:rt-tap-delivery .45s cubic-bezier(.34,1.45,.64,1);filter:none;box-shadow:none}
#s7 .dcb.rt-tap-active{animation:rt-tap-delivery-wide .48s cubic-bezier(.34,1.4,.64,1);filter:none}
#s7.s7--incident > .s2-inner{
  animation:s7-incident-glitch .42s ease-in-out 3;
  will-change:transform;
  position:relative;
  z-index:1;
}
/* Reforço local na cena Entrega (soma com body.rt-s7-red-veil) */
#s7.s7--incident::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%,rgba(252,165,165,.5) 0%,transparent 48%),
    linear-gradient(165deg,rgba(153,27,27,.88) 0%,rgba(69,10,10,.95) 100%);
  opacity:0;
  animation:s7-incident-red-bg 3.45s cubic-bezier(.32,0,.18,1) forwards;
}
@keyframes s7-incident-red-bg{
  0%{opacity:0}
  5%{opacity:1}
  92%{opacity:1}
  100%{opacity:0}
}
@keyframes s7-incident-glitch{
  0%,100%{transform:translate3d(0,0,0) skewX(0);filter:none}
  15%{transform:translate3d(-5px,2px,0) skewX(-0.5deg);filter:hue-rotate(18deg) saturate(1.15)}
  35%{transform:translate3d(6px,-3px,0) skewX(0.45deg);filter:hue-rotate(-28deg) contrast(1.06)}
  55%{transform:translate3d(-4px,-2px,0) skewX(-0.25deg)}
  75%{transform:translate3d(3px,4px,0) skewX(0.2deg);filter:none}
}
@media (prefers-reduced-motion:reduce){
  #s7 .ds:active,#s7 .dcb:active{transform:none}
  #s7 .ds.rt-tap-active,#s7 .dcb.rt-tap-active{animation:none}
  #s7.s7--incident > .s2-inner{animation:none!important}
  #s7.s7--incident::before{animation:none!important;opacity:.85!important}
}
.dsv{font-size:1.75rem;font-weight:600;letter-spacing:-0.02em;color:#a78bfa;margin-bottom:4px}
.dsl{font-size:11px;color:var(--muted);font-weight:500}
.dcb{width:100%;max-width:1040px;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:22px;min-height:0;flex-shrink:0;transition:box-shadow .45s ease,border-color .45s ease}
.dcb .chart-wrap{height:200px;min-height:200px}
.dcb.dcb--chart-pulse{box-shadow:0 0 0 1px rgba(124,58,237,.25),0 12px 40px rgba(124,58,237,.12);border-color:rgba(139,92,246,.35)}
.ds.ds--critical{
  border-color:rgba(239,68,68,.55)!important;
  background:rgba(127,29,29,.25);
  animation:ds-critical-pulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(239,68,68,.2);
}
.ds.ds--critical .dsv{color:#fca5a5!important}
@keyframes ds-critical-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(239,68,68,.15)}
  50%{box-shadow:0 0 0 3px rgba(239,68,68,.25),0 8px 28px rgba(220,38,38,.2)}
}
/* Simulação bug crítico — entrega (s7) */
.rt-bug-overlay{
  position:fixed;inset:0;z-index:210;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);
  background:radial-gradient(ellipse 90% 70% at 50% 45%,rgba(220,38,38,.42) 0%,rgba(80,10,10,.88) 45%,rgba(10,2,4,.96) 100%);
  opacity:0;visibility:hidden;pointer-events:none;
  backdrop-filter:saturate(1.15) blur(4px);
  -webkit-backdrop-filter:saturate(1.15) blur(4px);
  transition:opacity .52s var(--ease-out-smooth),visibility .52s,backdrop-filter .5s ease;
}
.rt-bug-overlay.is-on{opacity:1;visibility:visible;pointer-events:auto}
.rt-bug-overlay__panel{
  max-width:min(420px,92vw);text-align:center;
  transform:scale(.92) translateY(8px);
  transition:transform .52s var(--ease-spring),opacity .45s var(--ease-out-smooth);
  opacity:.94;
  border-radius:16px;
  padding:clamp(20px,4vw,28px);
  background:rgba(8,4,6,.55);
  border:1px solid rgba(254,202,202,.12);
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
}
.rt-bug-overlay.is-on .rt-bug-overlay__panel{transform:scale(1) translateY(0);opacity:1}
.rt-bug-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.35);border:2px solid rgba(252,165,165,.6);
  font-size:26px;margin-bottom:16px;animation:rt-bug-shake .6s ease-in-out infinite;
}
@keyframes rt-bug-shake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-4deg)}
  75%{transform:rotate(4deg)}
}
.rt-bug-title{font-size:clamp(1.15rem,3vw,1.45rem);font-weight:700;color:#fef2f2;letter-spacing:-.02em;margin-bottom:8px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.rt-bug-sub{font-size:.8125rem;color:#fecaca;line-height:1.5;max-width:32ch;margin:0 auto 20px}
.rt-bug-fix{
  display:none;text-align:left;max-width:min(440px,94vw);
  border-radius:12px;overflow:hidden;border:1px solid rgba(34,197,94,.35);
  background:rgba(5,15,10,.92);box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.rt-bug-overlay.phase-fix .rt-bug-alert{display:none}
.rt-bug-overlay.phase-fix .rt-bug-fix{display:block}
.rt-bug-overlay.phase-fix{
  background:radial-gradient(ellipse 85% 65% at 50% 50%,rgba(20,50,35,.55) 0%,rgba(5,12,8,.94) 55%,#030806 100%);
}
.rt-bug-fix__head{
  font-family:var(--font-mono);font-size:9px;padding:8px 12px;
  background:rgba(34,197,94,.12);color:#86efac;border-bottom:1px solid rgba(34,197,94,.2);
}
.rt-bug-fix__body{
  font-family:var(--font-mono);font-size:10px;line-height:1.75;padding:12px 14px 14px;
  color:#94a3b8;min-height:120px;max-height:min(38vh,200px);overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.rt-bug-fix__body::-webkit-scrollbar{width:0;height:0}
.rt-bug-fix__body div{margin-bottom:2px;opacity:0;animation:rt-bug-line-in .35s ease forwards}
@keyframes rt-bug-line-in{to{opacity:1}}
.rt-bug-fix .g{color:#4ade80}.rt-bug-fix .r{color:#f87171}.rt-bug-fix .c{color:#64748b}.rt-bug-fix .y{color:#fde047}
@media (prefers-reduced-motion:reduce){
  .rt-bug-overlay,.rt-bug-overlay__panel{transition:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .rt-bug-overlay__panel{transform:none;opacity:1}
  .rt-bug-icon{animation:none}
  .ds.ds--critical{animation:none}
}

/* STACK — scroll interno; centra quando o conteúdo é mais baixo que a viewport */
#s8{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-self:stretch;
  width:100%;
  align-items:stretch;
  align-content:start;
  padding:clamp(72px,11vh,112px) clamp(16px,3vw,32px) clamp(64px,10vh,104px);
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@supports (align-content:safe center){
  #s8{align-content:safe center}
}
.skl{
  padding:16px 36px 24px 52px;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  min-width:0;
}
.skr{padding:16px 52px 24px 36px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:0;min-width:0}
.archbox{
  margin-top:18px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 18px;
}
.archbox .chart-wrap{
  position:relative;
  width:100%;
  height:min(240px,32vh);
  min-height:200px;
  max-height:280px;
  margin-top:6px;
  flex-shrink:0;
}
.archbox .chart-wrap canvas{display:block;width:100%!important;height:100%!important}
.si{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.si::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleX(0);transition:transform .22s}
.si:hover::before,.si.is-active::before{transform:scaleX(1)}
.si:hover{border-color:rgba(124,58,237,.28);transform:translateX(4px)}
.si.is-active{border-color:rgba(124,58,237,.42);background:rgba(124,58,237,.1);box-shadow:0 0 0 1px rgba(124,58,237,.12)}
.si:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.sic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.sin{flex:1;min-width:0}
.sinm{font-weight:600;font-size:0.8125rem;margin-bottom:2px}
.sind{font-size:11px;color:var(--muted);line-height:1.4}
.sbg{font-family:var(--font-mono);font-size:9px;padding:3px 8px;border-radius:100px;letter-spacing:0.03em;white-space:nowrap;font-weight:500}
.bfe{background:rgba(124,58,237,.18);color:var(--accent-soft)}
.bbe{background:rgba(129,140,248,.15);color:#a5b4fc}
.binfra{background:rgba(167,139,250,.12);color:#c4b5fd}
/* DEPLOY */
#s9{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:max(72px,calc(56px + env(safe-area-inset-top,0px))) 0 max(48px,calc(36px + env(safe-area-inset-bottom,0px)));
}
#s9 > .dpw{
  margin-top:auto;
  margin-bottom:auto;
  flex-shrink:0;
}
.dpw{width:100%;max-width:1040px;padding:0 clamp(20px,5vw,64px)}
.dpg{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:28px}
.pip{display:flex;flex-direction:column;margin-top:24px}
.ps{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.pd2{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;font-weight:600;position:relative}
.pd2.done{background:var(--accent);color:#fff}
.pd2.run{background:rgba(124,58,237,.2);color:var(--accent-soft);border:1px solid var(--accent)}
.pd2.pend{background:var(--glass);color:var(--muted);border:1px solid var(--border)}
.pd2.run{animation:pl-ico-spin 1.05s linear infinite}
@keyframes pl-ico-spin{to{transform:rotate(360deg)}}
.pipe-commit-btn{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(124,58,237,.12);
  color:var(--white);
  font-family:var(--font-sans);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.pipe-commit-btn:hover{border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.2);transform:translateY(-1px)}
.pipe-commit-btn:disabled{opacity:.55;cursor:wait;transform:none}
.pipe-commit-btn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.dmv--ghost{color:var(--muted)!important;font-size:1.1rem!important;letter-spacing:2px}
.dmg.rt-pipe-busy .dm{border-color:rgba(124,58,237,.22);box-shadow:0 0 0 1px rgba(124,58,237,.08)}
@media (prefers-reduced-motion:reduce){
  .pd2.run{animation:none}
  .py-console__lines,.py-console__bar span:last-child{animation:none!important}
  .py-console__cursor{animation:none;opacity:.6}
  .py-sleep-zzz{animation:none!important;opacity:.35}
  .py-stage--sleeping .py-bot{animation:none!important}
  .py-stage--waking .py-bot{animation:none!important}
  .py-comet-layer{opacity:0!important}
  .py-comet,.py-comet.py-comet--go{animation:none!important}
}
.pn{font-weight:600;font-size:0.8125rem;margin-bottom:2px}
.pst{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.ptm{font-family:var(--font-mono);font-size:9px;color:var(--accent);margin-top:3px}
/* Pipeline (s9) — um pouco maior e mais legível */
#s9 .dpw{max-width:1120px;padding:0 clamp(40px,6vw,80px)}
#s9 .dpg{gap:clamp(48px,5.5vw,76px);margin-bottom:32px}
#s9 .pip{margin-top:28px}
#s9 .ps{gap:16px;padding:16px 0}
#s9 .pd2{width:32px;height:32px;font-size:11px}
#s9 .pn{font-size:0.9375rem;margin-bottom:4px}
#s9 .pst{font-size:11px;line-height:1.4}
#s9 .ptm{font-size:10px;margin-top:5px}
#s9 .pipe-commit-btn{margin-top:18px;padding:12px 24px;font-size:0.8125rem;border-radius:11px}
#s9 .dpg-col-right{
  display:flex;flex-direction:column;gap:16px;min-width:0;
}
#s9 .dpg-col-right .pipe-mon{margin-top:0}
.pipe-mon{
  margin-top:28px;padding:18px 20px;border-radius:14px;
  background:rgba(124,58,237,.07);border:1px solid var(--border);
  box-shadow:0 14px 44px rgba(0,0,0,.18);
}
.pipe-mon__head{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:14px;font-weight:600;
}
.pipe-mon__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(124,58,237,.1);
  font-size:12px;
}
.pipe-mon__row:last-child{border-bottom:none;padding-bottom:2px}
.pipe-mon__k{color:var(--muted);font-weight:500;flex-shrink:0}
.pipe-mon__v{
  font-family:var(--font-mono);font-size:11px;color:var(--white);
  text-align:right;word-break:break-word;max-width:62%;
}
.pipe-mon__v--ok{color:#86efac!important}
.pipe-mon__v--run{color:#fde047!important}
.pipe-mon__v--idle{color:#8b8598!important}
.pipe-mon__bar{
  height:4px;border-radius:99px;background:rgba(124,58,237,.12);
  margin-top:14px;overflow:hidden;
}
.pipe-mon__bar>i{
  display:block;height:100%;width:40%;
  background:linear-gradient(90deg,#7c3aed,#c4b5fd);
  border-radius:99px;
  animation:pipe-mon-bar-slide 2.4s ease-in-out infinite;
}
@keyframes pipe-mon-bar-slide{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(280%)}
}
@media (prefers-reduced-motion:reduce){
  .pipe-mon__bar>i{animation:none;transform:none;width:100%;opacity:.45}
}
.dmg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dm{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:border-color .25s,transform .25s;cursor:default}
.dm:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px)}
.dmv{font-size:1.75rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:4px}
.dml{font-size:11px;color:var(--muted);font-weight:500}
.term{background:#080612;border:1px solid rgba(124,58,237,.22);border-radius:12px;overflow:hidden;margin-top:0}
.tb{background:rgba(124,58,237,.06);padding:8px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(124,58,237,.1)}
.tdot{width:10px;height:10px;border-radius:50%}
.tbd{padding:14px 16px;font-family:var(--font-mono);font-size:11px;line-height:1.9;color:#6b6280;height:148px;overflow:hidden}
.tw{color:var(--white)}.ta{color:var(--accent-soft)}.tbl{color:#a5b4fc}.tg{color:var(--ok)}

/* —— Python · bots & IA —— */
.scene--python{
  flex-direction:column;
  padding:80px clamp(20px,4vw,44px) 64px;
  align-items:center;
  justify-content:flex-start;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  color:#e2e8f0;
}
.scene--python > .py-wrap{
  margin-top:auto;
  margin-bottom:auto;
  flex-shrink:0;
}
.py-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,52px);
  align-items:center;
  width:100%;
  max-width:1140px;
  min-height:0;
  margin:0 auto;
}
.py-col--text .slabel{color:#7dd3fc}
.py-col--text .stitle{color:#f8fafc}
.py-col--text .stext{color:#94a3b8}
.py-feat{
  list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px;
  font-size:.9375rem;line-height:1.55;color:#cbd5e1;
}
.py-feat li{display:flex;gap:12px;align-items:flex-start}
.py-feat li::before{
  content:'';flex:0 0 7px;height:7px;margin-top:7px;border-radius:2px;
  background:linear-gradient(135deg,#ffd43b,#f59e0b);
  box-shadow:0 0 12px rgba(255,212,59,.35);
}
.py-col--viz{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.py-stage{
  position:relative;width:100%;max-width:400px;aspect-ratio:1;
  margin:0 auto;
}
.py-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(55,118,171,.4);
  pointer-events:none;z-index:0;
}
.py-ring--outer{animation:py-ring-spin 26s linear infinite}
.py-ring--inner{
  inset:10%;
  border-color:rgba(255,212,59,.22);
  animation:py-ring-spin-rev 19s linear infinite;
}
.py-ring--mid{
  inset:18%;
  border:1px dashed rgba(125,211,252,.22);
  animation:py-ring-spin 34s linear infinite reverse;
}
.py-dots{
  position:absolute;inset:0;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(55,118,171,.12) 0%,transparent 70%);
  animation:py-pulse-bg 5s ease-in-out infinite alternate;
}
@keyframes py-ring-spin{to{transform:rotate(360deg)}}
@keyframes py-ring-spin-rev{to{transform:rotate(-360deg)}}
@keyframes py-pulse-bg{0%{opacity:.6;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
/* Cometa(s) atrás do bot durante o worker ativo */
.py-comet-layer{
  position:absolute;inset:-6%;z-index:2;
  pointer-events:none;overflow:hidden;border-radius:50%;
  opacity:0;transition:opacity .5s ease;
}
.py-stage.py-stage--comet-run .py-comet-layer{opacity:1}
.py-comet{
  position:absolute;left:50%;top:50%;
  width:min(200%,520px);height:18px;margin-left:min(-100%,-260px);margin-top:-9px;
  transform-origin:50% 50%;
  border-radius:99px;
  opacity:0;
  filter:blur(0.5px) drop-shadow(0 0 20px rgba(255,212,59,.45));
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(56,189,248,.12) 18%,
    rgba(125,211,252,.35) 32%,
    rgba(254,249,195,.9) 48%,
    rgba(255,212,59,.85) 52%,
    rgba(125,211,252,.3) 68%,
    rgba(56,189,248,.08) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 60px rgba(255,212,59,.25),
    0 0 100px rgba(125,211,252,.15),
    inset 0 0 20px rgba(255,255,255,.25);
}
.py-comet--a{transform:translate(-140%,-50%) rotate(-36deg) scaleX(1.15)}
.py-comet--b{
  width:min(160%,420px);margin-left:min(-80%,-210px);height:11px;margin-top:-5px;
  transform:translate(-140%,-50%) rotate(-22deg) scaleX(1.05);
  opacity:0;
  filter:blur(1px) drop-shadow(0 0 14px rgba(167,139,250,.4));
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(167,139,250,.2) 25%,
    rgba(196,181,253,.75) 48%,
    rgba(224,231,255,.95) 52%,
    rgba(167,139,250,.35) 72%,
    transparent 100%
  );
  box-shadow:0 0 50px rgba(167,139,250,.2),0 0 90px rgba(99,102,241,.12);
}
.py-comet.py-comet--go.py-comet--a{
  animation:py-comet-sweep-a 2.85s cubic-bezier(.2,.85,.15,1) forwards;
}
.py-comet.py-comet--go.py-comet--b{
  animation:py-comet-sweep-b 2.35s cubic-bezier(.22,.8,.12,1) 3.05s forwards;
}
@keyframes py-comet-sweep-a{
  0%{transform:translate(-150%,-50%) rotate(-36deg) scaleX(1.15);opacity:0}
  6%{opacity:.95}
  88%{opacity:.9}
  100%{transform:translate(150%,-50%) rotate(-36deg) scaleX(1.15);opacity:0}
}
@keyframes py-comet-sweep-b{
  0%{transform:translate(-130%,-40%) rotate(-22deg) scaleX(1.05);opacity:0}
  8%{opacity:.88}
  90%{opacity:.75}
  100%{transform:translate(135%,-58%) rotate(-22deg) scaleX(1.05);opacity:0}
}
.py-bot{
  position:absolute;left:50%;top:50%;width:44%;height:auto;z-index:4;
  transform:translate(-50%,-50%);
  animation:py-bot-float 4.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 22px 48px rgba(55,118,171,.45));
  cursor:pointer;
  transition:filter .28s ease;
}
.py-stage.is-bot-pulse .py-bot{
  filter:drop-shadow(0 26px 56px rgba(125,211,252,.55)) brightness(1.12);
}
@keyframes py-bot-float{
  0%{transform:translate(-50%,-50%) translateY(0)}
  100%{transform:translate(-50%,-50%) translateY(-10px)}
}
.py-stage--sleeping .py-ring--outer{animation-duration:78s;opacity:.38}
.py-stage--sleeping .py-ring--mid{animation-duration:102s;opacity:.28}
.py-stage--sleeping .py-ring--inner{animation-duration:58s;opacity:.22}
.py-stage--sleeping .py-dots{opacity:.4;animation-duration:9s}
.py-stage--sleeping .py-chip{opacity:.52}
.py-stage--sleeping .py-gear{opacity:.22;animation-play-state:paused}
.py-stage--sleeping .py-bot{
  animation:py-bot-sleep-float 3.35s ease-in-out infinite alternate;
  filter:drop-shadow(0 18px 42px rgba(55,118,171,.32)) brightness(.76) saturate(.86);
}
@keyframes py-bot-sleep-float{
  0%,100%{transform:translate(-50%,-50%) translateY(5px) rotate(-1.2deg)}
  50%{transform:translate(-50%,-50%) translateY(10px) rotate(1deg)}
}
.py-stage--sleeping .py-ant{animation:none;opacity:.32}
.py-stage--sleeping .py-bot-screen{opacity:.22!important}
.py-bot-sleep{display:none}
.py-stage--sleeping .py-bot-awake{display:none}
.py-stage--sleeping .py-bot-sleep{display:block}
.py-sleep-zzz{
  position:absolute;left:56%;top:14%;z-index:5;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.02em;color:rgba(148,163,184,.5);
  pointer-events:none;opacity:0;transition:opacity .45s ease;
  animation:py-zzz 2.4s ease-in-out infinite;
}
.py-stage--sleeping .py-sleep-zzz{opacity:1}
@keyframes py-zzz{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(5px,-7px) scale(1.05)}
}
.py-sleep-zzz span{font-size:9px;opacity:.55;margin-left:1px}
.py-stage--waking .py-bot{
  animation:py-bot-wake .75s ease-out forwards!important;
}
@keyframes py-bot-wake{
  0%{transform:translate(-50%,-50%) translateY(8px) scale(.93);filter:drop-shadow(0 16px 36px rgba(55,118,171,.35)) brightness(.72) saturate(.82)}
  55%{transform:translate(-50%,-50%) translateY(-6px) scale(1.07);filter:drop-shadow(0 26px 54px rgba(125,211,252,.5)) brightness(1.12) saturate(1.05)}
  100%{transform:translate(-50%,-50%) translateY(0) scale(1);filter:drop-shadow(0 22px 48px rgba(55,118,171,.45))}
}
.py-ant{animation:py-ant-pulse 1.6s ease-in-out infinite}
@keyframes py-ant-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Raio em px: com nó 0×0, % em translateY virava 0 e todos os chips iam para o centro (em cima do bot) */
.py-orbit{
  position:absolute;inset:0;border-radius:50%;z-index:3;
  pointer-events:none;
  --py-r:clamp(118px,32vmin,172px);
}
@media (max-width:480px){
  .py-orbit{--py-r:clamp(96px,30vw,132px);}
}
.py-orbit-node{
  position:absolute;left:50%;top:50%;width:1px;height:1px;
  margin:-0.5px 0 0 -0.5px;
  transform:rotate(var(--py-ang,0deg)) translateY(calc(-1 * var(--py-r)));
}
/* Texto sempre horizontal: compensa a rotação do nó (antes ficava de lado / invertido) */
.py-orbit-node .py-chip{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%) rotate(calc(0deg - var(--py-ang,0deg)));
  pointer-events:auto;
}
.py-chip{
  position:relative;z-index:2;
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.04em;padding:7px 11px;border-radius:9px;
  background:rgba(15,40,60,.82);
  border:1px solid rgba(125,211,252,.32);
  color:#bae6fd;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
}
.py-chip--y{border-color:rgba(255,212,59,.4);color:#fef9c3;background:rgba(55,48,15,.58)}
.py-chip:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.py-chip.is-active{
  border-color:rgba(125,211,252,.85);
  box-shadow:0 0 0 2px rgba(125,211,252,.2),0 12px 36px rgba(55,118,171,.4);
  background:rgba(25,65,95,.92);
}
.py-snippet{
  font-family:var(--font-mono);font-size:8px;font-weight:600;
  padding:5px 8px;border-radius:6px;
  background:rgba(6,16,24,.88);
  border:1px solid rgba(74,222,128,.22);
  color:#86efac;
  opacity:.88;
}
.py-gear-orbit{
  font-size:20px;line-height:1;opacity:.42;color:#7dd3fc;
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;
}
.py-gear-orbit--s{font-size:15px;opacity:.32}
.py-gear{
  position:absolute;font-size:22px;line-height:1;opacity:.35;
  color:#7dd3fc;animation:py-gear-spin 12s linear infinite;
  pointer-events:none;
}
.py-gear--2{right:10%;bottom:18%;animation-duration:17s;animation-direction:reverse;font-size:18px}
.py-gear--1{left:8%;top:22%}
@keyframes py-gear-spin{to{transform:rotate(360deg)}}
.py-run-bar{
  width:100%;max-width:400px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(125,211,252,.22);
  background:rgba(6,20,32,.75);
}
.py-run-bar__meta{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.py-run-bar__k{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;font-weight:600}
.py-run-bar__status{font-family:var(--font-mono);font-size:10px;color:#86efac;line-height:1.45;word-break:break-word}
.py-run-btn{
  flex-shrink:0;border:none;cursor:pointer;font-family:var(--font-sans);font-size:11px;font-weight:600;
  padding:8px 16px;border-radius:9px;color:#0f172a;
  background:linear-gradient(135deg,#7dd3fc,#38bdf8);
  box-shadow:0 4px 18px rgba(56,189,248,.35);
  transition:transform .15s ease,filter .15s ease,opacity .2s;
}
.py-run-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.py-run-btn:active{transform:translateY(0) scale(0.97)}
.py-run-btn:disabled{opacity:.55;cursor:wait;transform:none}
.py-console{
  width:100%;max-width:400px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(55,118,171,.35);
  background:linear-gradient(180deg,rgba(8,22,35,.92) 0%,rgba(4,12,20,.96) 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.py-console.py-console--busy .py-console__lines{animation-duration:32s}
.py-console.py-console--sleep .py-console__lines{
  animation-play-state:paused;
  opacity:.4;
}
.py-console.py-console--sleep .py-console__bar span:last-child{
  color:#64748b;
  animation:none;
  font-weight:600;
}
.py-console__bar{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:rgba(55,118,171,.1);
  border-bottom:1px solid rgba(55,118,171,.15);
  font-family:var(--font-mono);font-size:9px;color:#64748b;
}
.py-console__bar span:last-child{
  color:#7dd3fc;margin-left:auto;
  animation:py-running-pulse 2.2s ease-in-out infinite;
  font-weight:700;letter-spacing:.06em;
}
@keyframes py-running-pulse{
  0%,100%{opacity:.75;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.15)}
}
.py-console__track{
  height:112px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,transparent 0%,rgba(55,118,171,.04) 50%,transparent 100%);
}
.py-console__track::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:28px;
  background:linear-gradient(transparent,rgba(4,12,20,.95));
  pointer-events:none;z-index:1;
}
.py-console__lines{
  font-family:var(--font-mono);font-size:10px;line-height:1.85;
  padding:12px 14px 20px;color:#64748b;
  animation:py-console-scroll 18s linear infinite;
}
.py-console__lines>div{transition:opacity .15s}
.py-console__lines .kw{color:#7dd3fc;text-shadow:0 0 12px rgba(125,211,252,.15)}
.py-console__lines .fn{color:#a5b4fc}
.py-console__lines .st{color:#4ade80}
.py-console__lines .cm{color:#475569}
.py-console__lines .py-num{display:inline-block;min-width:1.2em;transition:color .2s}
.py-console__cursor-row{
  display:flex;align-items:center;gap:4px;margin-top:2px;color:#64748b;
  font-size:9px;
}
.py-console__cursor{
  display:inline-block;width:7px;height:14px;background:#7dd3fc;
  animation:py-cursor-blink .9s step-end infinite;
  vertical-align:middle;
}
@keyframes py-cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes py-console-scroll{
  0%{transform:translateY(0)}
  100%{transform:translateY(-50%)}
}
/* —— Equipe (final) —— */
.scene--team{
  flex-direction:column;
  padding:72px clamp(20px,4vw,40px) 56px;
  align-items:center;
  justify-content:flex-start;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  color:#f1f5f9;
}
.scene--team > .team-shell{
  margin-top:auto;
  margin-bottom:auto;
  flex-shrink:0;
}
.team-shell{width:100%;max-width:1080px;margin:0 auto;text-align:center}
.team-head{margin-bottom:clamp(28px,4vw,44px)}
.team-kicker{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#c4b5fd;margin-bottom:14px;font-weight:600
}
.team-title{
  font-size:clamp(1.85rem,4.2vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.08;
  margin-bottom:16px;
  background:linear-gradient(135deg,#fff 0%,#e9d5ff 45%,#fde68a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.team-lede{
  font-size:clamp(.9rem,1.8vw,1.05rem);color:#94a3b8;max-width:36rem;margin:0 auto;line-height:1.65;font-weight:400
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.5vw,24px);
  margin-bottom:clamp(28px,4vw,40px);
  text-align:left;
}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:linear-gradient(165deg,rgba(124,58,237,.12) 0%,rgba(15,10,25,.85) 100%);
  border:1px solid rgba(124,58,237,.22);
  border-radius:20px;
  padding:clamp(18px,2.5vw,24px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.team-card:hover{
  border-color:rgba(167,139,250,.4);
  box-shadow:0 24px 56px rgba(124,58,237,.18);
  transform:translateY(-4px);
}
.team-photo{
  position:relative;
  aspect-ratio:1;
  max-width:140px;
  margin:0 auto 16px;
  border-radius:16px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,rgba(88,28,135,.5) 0%,rgba(30,20,50,.9) 100%);
  display:flex;align-items:center;justify-content:center;
}
.team-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.team-photo:has(img) .team-photo__fallback{display:none}
.team-photo__fallback{
  font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.04em;
  color:#e9d5ff;opacity:.9;
}
.team-card:nth-child(1) .team-photo{background:linear-gradient(145deg,#5b21b6 0%,#1e1033 100%)}
.team-card:nth-child(2) .team-photo{background:linear-gradient(145deg,#1d4ed8 0%,#0f172a 100%)}
.team-card:nth-child(3) .team-photo{background:linear-gradient(145deg,#0d9488 0%,#0f172a 100%)}
.team-card:nth-child(4) .team-photo{background:linear-gradient(145deg,#7c3aed 0%,#1e1b4b 100%)}
.team-name{font-size:1.05rem;font-weight:600;color:#f8fafc;margin-bottom:6px;letter-spacing:-.02em;line-height:1.25}
.team-role{
  font-size:11px;color:#a5b4fc;line-height:1.45;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
}
.team-cta{margin-top:8px}
.team-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border-radius:12px;
  background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);
  color:#fff;font-weight:600;font-size:.8125rem;letter-spacing:.04em;
  text-decoration:none;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 48px rgba(124,58,237,.35);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.team-cta__btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 56px rgba(124,58,237,.42)}
.team-cta__btn:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}

@media (max-width:900px){
  .py-wrap{grid-template-columns:1fr}
  .py-stage{max-width:340px}
  #s8{grid-template-columns:1fr}
  #s6{
    grid-template-columns:1fr;
    grid-template-rows:minmax(8px,1fr) auto auto minmax(8px,1fr);
    column-gap:0;
    row-gap:0;
    min-height:100%;
    min-height:100dvh;
  }
  #s6 > .dl{grid-column:1;grid-row:2}
  #s6 > .dr{grid-column:1;grid-row:3}
  .pilar-grid,.pilar-grid--rev{grid-template-columns:1fr;direction:ltr}
  .scene--pilar{padding:76px 22px 64px}
  .scene--python{padding:72px 22px 48px}
  #s6{padding:max(40px,calc(28px + env(safe-area-inset-top,0px))) clamp(14px,3vw,24px) max(40px,calc(28px + env(safe-area-inset-bottom,0px)))}
  #s6 .dl,#s6 .dr{padding:24px clamp(12px,3vw,28px);justify-content:center}
  #s8{padding:max(56px,calc(44px + env(safe-area-inset-top,0px))) clamp(14px,3vw,24px) max(40px,calc(28px + env(safe-area-inset-bottom,0px)))}
  #s8 .skl,#s8 .skr{padding:20px clamp(14px,3vw,28px)}
  .dl,.skl{border-right:none;border-bottom:1px solid var(--border)}
  .dsg{grid-template-columns:repeat(2,1fr)}
  .dpg{grid-template-columns:1fr}
  nav{padding:18px 24px}
  .nl{gap:20px}
  .nl a{font-size:11px}
}
body.scene-light #pb .pd{background:rgba(15,23,42,.2)}
body.scene-light #pb .pd.on{
  background:linear-gradient(90deg,#6d28d9,#8b5cf6);
  box-shadow:0 0 12px rgba(124,58,237,.4);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* —— Superfícies clicáveis (feedback global) —— */
.rt-surface{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .28s var(--ease-out-smooth),box-shadow .32s var(--ease-out-smooth),transform .26s var(--ease-spring);
}
@media (hover:hover){
  #vp .scene:not(.scene--pilar) .rt-surface:hover{filter:brightness(1.06)}
  .scene--pilar .rt-surface:hover{
    filter:none;
    box-shadow:0 20px 50px rgba(91,33,182,.1);
  }
}
nav .logo.rt-surface:hover{opacity:.92}
nav .nl a.rt-surface:hover{color:var(--white)}
#pb .pd.rt-surface:hover{transform:scale(1.08)}
.rt-tap-active{animation:rt-tap-dark .48s var(--ease-out-smooth)}
.rt-tap-active.rt-tap-lightmode{animation:rt-tap-light .48s var(--ease-out-smooth)}
@keyframes rt-tap-dark{
  0%,100%{filter:brightness(1);box-shadow:none}
  40%{filter:brightness(1.26);box-shadow:0 0 0 2px rgba(124,58,237,.42),0 12px 36px rgba(91,33,182,.15)}
}
@keyframes rt-tap-light{
  0%,100%{box-shadow:0 0 0 0 transparent}
  45%{box-shadow:0 0 0 3px rgba(124,58,237,.34),0 18px 52px rgba(91,33,182,.14)}
}
button.rt-surface:active,.ncta.rt-surface:active{transform:scale(.98)}