:root{color-scheme:dark;--papel:#0B1219;--tinta:#F1F0EE;--tinta-2:#AEB3BD;--tinta-3:#868C98;--linha:#26303D;--violeta:#8C74FF;--violeta-claro:#B3A3FF;--azul:#7EC2FF;--verde:#48B87F;--f1:#2AA85A;--f2:#F2CD28;--f3:#F6F8FB;--f4:#1677D2;--f5:#D3424D;--f6:#8756BD;--f7:#A3714F;--f8:#DC6D9A;--display:"Funnel Display","Segoe UI",system-ui,sans-serif;--texto:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}
*{margin:0;box-sizing:border-box}
html{height:100%;background:var(--papel)}
body{min-height:100%;display:grid;grid-template-rows:1fr auto;background:var(--papel);color:var(--tinta);font-family:var(--texto);-webkit-font-smoothing:antialiased;padding:20px 0 18px;overflow-x:hidden}
.palco{align-self:center;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.fibras{display:block;width:100%;height:clamp(170px,38vh,480px)}
.cabos path{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.82}
.f1{stroke:var(--f1)}.f2{stroke:var(--f2)}.f3{stroke:var(--f3)}.f4{stroke:var(--f4)}.f5{stroke:var(--f5)}.f6{stroke:var(--f6)}.f7{stroke:var(--f7)}.f8{stroke:var(--f8)}
.pulsos path{fill:none;stroke:var(--azul);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:3 200;stroke-dashoffset:3;animation:corre 5s cubic-bezier(.45,.05,.55,.95) infinite;opacity:0}
.pulsos .p1{animation-delay:-.2s}.pulsos .p2{animation-delay:-1.1s}.pulsos .p3{animation-delay:-2.3s}.pulsos .p4{animation-delay:-3s}.pulsos .p5{animation-delay:-.7s}.pulsos .p6{animation-delay:-1.8s}.pulsos .p7{animation-delay:-2.7s}.pulsos .p8{animation-delay:-1.4s}
@keyframes corre{0%{stroke-dashoffset:3;opacity:0}12%{opacity:1}82%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.saida{fill:none;stroke-width:2.2}
.desce-a{stop-color:var(--violeta);stop-opacity:.8}
.desce-b{stop-color:var(--violeta);stop-opacity:0}
.aro{fill:var(--papel);stroke:var(--violeta);stroke-width:2.6}
.no{fill:var(--verde)}
.anel{fill:none;stroke:var(--violeta);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:respira 5s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(.75);opacity:0}50%{transform:scale(1.1);opacity:.5}}
.marca{font-family:var(--display);font-weight:500;font-size:clamp(3.2rem,8.5vw,9.5rem);letter-spacing:-.035em;line-height:1;color:var(--tinta-2)}
.marca b{font-weight:700;color:var(--tinta)}
.lema{margin:clamp(.9rem,1.4vw,1.6rem) auto 0;padding:0 16px;font-size:clamp(1rem,.7rem + .9vw,1.6rem);color:var(--tinta-2);max-width:44ch;text-wrap:balance}
.breve{margin-top:clamp(1.8rem,3vw,3rem)}
.selo{display:inline-flex;align-items:baseline;gap:.1em;font-family:var(--mono);font-weight:500;font-size:clamp(.76rem,.6rem + .35vw,1rem);letter-spacing:.16em;text-transform:uppercase;color:var(--violeta-claro);padding:.65em 1.1em .65em 1.3em;border:1px solid rgb(140 116 255/.35);border-radius:999px;background:rgb(140 116 255/.08)}
.pontos{display:inline-flex;letter-spacing:.05em}
.pontos i{font-style:normal;opacity:.2;animation:ponto 1.4s infinite}
.pontos i:nth-child(2){animation-delay:.2s}
.pontos i:nth-child(3){animation-delay:.4s}
@keyframes ponto{0%,60%,100%{opacity:.2}30%{opacity:1}}
.assina{position:relative;text-align:center}
.assina a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:500;font-size:.85rem;color:var(--tinta-2);text-decoration:none;padding:.4rem .6rem;border-radius:8px;transition:color .2s}
.assina a:hover,.assina a:focus-visible{color:var(--tinta)}
.assina a:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
.assina svg{width:20px;height:20px}
.assina .tech{color:var(--tinta-3)}
.w path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.w .w-base{stroke-width:2.6}
.w-pedra{fill:currentColor}
.w-meio{fill:var(--verde)}
@media (prefers-reduced-motion:reduce){.pulsos{display:none}.anel,.pontos i{animation:none}.pontos i{opacity:1}}